响应式布局

1.响应式布局——媒体查询（media query）

1）定义： 同一页面在不同屏幕尺寸下有不同的布局。（PC端、iPad端、移动端）

2）语法1——内部引入：
（1）PC端：
media screen and (min-width:992px){
PC端的样式
}

（2）iPad端：
media screen and (max-width:992px) and (min-width:768px){
iPad端的样式
}
（3）移动端：
media screen and (max-width:768px){
PC端的样式
}

语法2——外部引入：
（1）PC端：

 <link href="" rel="stylesheet" media="screen and (min-width:992px)" />

（2）iPad端：

    <link href="" rel="stylesheet" media="screen and (min-width:768px) and (max-width:992px)" />

（3）移动端：

    <link href="" rel="stylesheet" media="screen and (max-width:768px)" />

3）优点：
（1）面对不同分辨率设备灵活性强
（2）能够快捷解决多设备显示适应问题

4）缺点：
（1）兼容各种设备工作量大，效率低下
（2）代码累赘，会出现隐藏无用的元素，加载时间加长

5）响应式设计的步骤：
（1）设置meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

其中：
width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

（2）通过媒介查询来设置Media Queries：

内部引入：
@media 媒体类型and （媒体特性）{你的样式}
外部引入：
<link rel="stylesheet" href="" media="screen  and  (宽度)"/>

其中：
最大宽度max-width：是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。
最小宽度min-width：是媒体类型大于或等于指定宽度时，样式生效。
多个媒体特性使用：使用关键词"and"将多个媒体特性结合在一起。