响应式布局 和媒体查询

响应式

一个网站可以兼容多个终端

   优点：

• ①面对不同的分辨率时，设备的灵活性较强
  ② 能够解决多个设备上适应的问题
  ③ 中小型企业

一个网站可以兼容多个终端

   缺点：

• ① 为了兼容多个设备，工作量较大，效率不高
  ② 代码 冗余，有很多隐藏无意义的元素，加载速率不是很快

       原理：通过CSS3新增的媒体查询，通过匹配不同的宽度，显示不同的样式
  

媒体查询

能够通过检测设备的宽度。显示不同样式

媒体类型

• all 所有媒体 screen 彩屏设备 print 用于打印机和打印预览 speech 应用于屏幕阅读器等发声设备

媒体查询的逻辑关键字

• and：并且（和） not ：用来排除某种制定的媒体类型（非） only ：(限定某种设备)某种特定的媒体类型

媒体查询的参数条件(media feature)

• (width:600px) 宽 (max-width:600px) 最大宽度 <=600 (min-width: 480px) 最小宽度 >=480 (orientation:portrait) 竖屏 (orientation:landscape) 横屏

• 媒体查询的参数条件
  (width:600px) 宽 (max-width:500px) 最大宽度 <=500px (min-width: 480px) 最小宽度 >=480px

• 代码格式：@media mediatype [and/not/only] (media feature) [and/not/only] (media feature)… { 代码块 };
  代码格式：@media 哪种设备 判断条件1 参数条件1 判断条件2 参数条件2 … {代码块 }

外部引入，媒体查询方式

• 代码格式：@inport url(css文件地址) mediatype [and/not/only] (media feature) [and/not/only] (media feature)；
  代码格式：@media url(css文件地址) 哪种设备 判断条件1 参数条件1 判断条件2 参数条件2；
  当前代码：@media url（css/index.css）

通过CSS引入，媒体查询方式3

• 代码格式：<link rel=“文件类型”href=“文件地址”media=“ mediatype [and/not/only] (media feature) …”>
  代码格式：<link rel=“文件类型”href=“文件地址”media=“ 哪种设备 判断条件1 参数条件1

视口viewport

通过设置viewport，用里面的content值设置视口功能

        ① 设置视口宽度=当前设备宽度width=device-width
        ② 不允许用户自动缩放：user-scalable=no(no/yes  0/1)
        ③ 设置默认缩放比例：initial-scale=1.0
        ④ 设置最大缩放比例：maximum-scale=1.0
        ⑤ 设置最小缩放比例：minimum-scale=1.0 

rem布局详解

什么是rem?

• rem」是指根元素（root element，html）的字体大小，好开心的是，从遥远的 IE6 到版本帝 Chrome 他们都约好了，根元素默认的 font-size 都是 16px。

XMind: ZEN - Trial Version