响应式布局基本实现Media Query（媒介查询）

1.Media Query的使用方法

首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：

<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，因为我们不希望用户放大缩小页面）

使用：

@media 设备类型 and （设备特性）{样式代码}

2.Ｍedia Query的设备类型（10种）

• all：所有设备
• screen：电脑显示器
• print：打印用纸或打印预览视图
• handled：便携设备
• tv：电视机类型的设备
• …

3.CSS中的Media Query的设备特性（13种）

• 设备宽高：device-width,device-height
• 渲染窗口的宽和高：width,height
• 设备的手持方向：orientation
• 设备的分辨率：resolution
• …

4.使用方法：（ 外联和内嵌样式）

//外联

@import url(style.css) screen and (min-width:1000px);

<link rel="stylesheet" href="style.css" media="only screen and (max-width:640px)">

//内嵌样式：
<style>
    @media screen and (min-width:640px) {
      body{
        background:coral;
      }
    }
  style>

注意:only关键字的作用是，让那些不支持Media Query但是能够读取Media Type的设备的浏览器将表达式中的样式隐藏起来。

@media only screen and (color){样式代码}

对于支持Media Query的设备来说，正确应用该样式；对于不支持Media Query但能够读取Media Type的设备，由于先读取到的是only 而不是screen，将忽略该样式。

5.在iPhone中的显示

现在的网页大多是按照宽度为800px左右的标准进行制作的，故Safari浏览器按照980px的宽度来显示，就可以正常显示绝大多数的网页了。

所以iPhone中的Safari浏览器也不会应用小尺寸窗口运行时的样式，也是选择窗口宽度为980px时所应用的样式。因此，可以加入meta标签来指定窗口宽度来显示。

<meta name='viewport' content='width=600px' />

6.bootstrap栅格系统的应用：

bootstrap栅格系统： http://v3.bootcss.com/css/#grid

bootstrap中媒体查询中创建关键了3个分界点阈值：

超小屏幕 手机 (<768px)
小屏幕 平板 (≥768px)
中等屏幕 桌面显示器 (≥992px)
大屏幕 大桌面显示器 (≥1200px)