1.1 什么是媒体查询

• 针对特定的设备或条件为网页引用特定的CSS样式。
• 浏览器会将不符合媒体查询指定条件的CSS文件延缓执行。

1.2 媒体查询语法

1.2.1 媒体查询特性

常见：

• width:视口宽度
• height：视口高度
• device-width�：渲染表面的宽度（可以认为是设备屏幕的宽度）
• divice-height：渲染表面的高度
• orientation：设备方向是水平还是垂直
• aspect-ration：视口宽高比。16：9即是 aspect-retion:16/9。
• resolution：屏幕或打印分辨率，如 min-resolution: 300dpi。
• monochrome：单色帧缓冲中表示每个像素的位数。
• scan：略
• grid：设备基于栅格还是位图。
• ...

可编程的媒体特性：

• scripting: 判断JavaScript是否启用
  • scripting:none没有JavaScript时
  • scripting:enabled有JavaScript时
  • scripting:initial-onlyJavaScript只在一开始有效时

交互媒体特性：

• pinter:查询设备 主输入机制是否存在，或其精度。
  • pinter:none
  • pinter:coarse低精度控制输入机制（类似游戏摇杆、触摸输入的手指）
  • pinter:fine高精度输入精度指针设备（类似鼠标、触控笔）
• any-pointer:同pinter类似，查询设备任意输入。

悬停媒体特性：

• hover：检测用户的主输入机制可否在元素上悬停。
  • hover:none
  • hover:on-demand可以悬停但是必须经过一定启动步骤
  • hover可悬停
• any-hover:同hover类似，查询设备任意输入。

环境媒体特性：

• light-level：根据用户的环境光线亮度
  • light-level:normal标准亮度
  • light-level:dim暗光
  • light-level:washed强光

1.2.2 在<link>标签中使用媒体查询

• <link>标签的 media属性中指定设备类型，为不同设备引用样式表。

  <!-- 只针对有屏幕的设备应用screen-style.css样式表 -->
  <link rel="stylesheet" 
        type="text/css"
        href="screen-style.css"
        media="screen" />
  
  <!-- 只针对有屏幕的设备，且屏幕朝向是垂直的引用portrait-screen.css样式表 -->
  <link rel="stylesheet"
        type="text/css"
        href="portrait-screen.css"
        media="screen" />
  

• 通过and将多个媒体查询组合在一起，进一步限制样式表的引用。

• <link rel="stylesheet"
        type="text/css"
        href="800wide-portrait-screen.css"
        media="screen 
               and (orientation: portrait) 
               and (min-width: 800px)" />
  

• 通过添加 ,逗号分隔每个媒体查询，只要任何一个媒体查询表达式为真，就应用样式表。

  <!--只要是屏幕垂直方向最小视口大于800px的有屏幕设备，或是投影机设备，就应用样式表-->
  <!-- 逗号分隔每个媒体查询 -->
  <link rel="stylesheet"
        type="text/css"
        href="8002ide-prtrait-screen.css"
        media="screen
               and (orientation: portrait)
               and (min-width: 800px) 
               ,
               projection" />
  

  上面例子中projection（投影机）省略了特性值，表示可以使用任何投影机。

1.2.3 在<meta>标签中使用媒体查询

• 按照设备的宽度(device-width)来渲染网页内容。

• <meta name="viewport"
        content="width=device-width" />
  

  name="viewport"表示针对视口

• 设置网页内容比例 initial-scale。

• <!-- 把网页内容放大为实际大小的两倍-->
  <meta name="viewport"
        content="initial-scale=2.0 ,
                 width=device-width" />
  

• 控制用户可以缩放网页的程度 maximum-scale/minmum-scale 。

• <!-- 用户最大只能将网页放大到设备宽度3倍，最小可以将网页缩小到设备宽度一半 -->
  <meta name="viewport"
        content="width=device-width ,
                 maximum-scale=3 ,
                 minimum-scale=0.5" /> 
  

• 禁止用户缩放网页 user-scalable=no 。

  <meta name="viewport"
        content="initial-scale=1.9 ,
                 user-scalable=no" />
  

1.2.4 在 CSS中使用媒体查询

• 使用 @import在当前样式表中加载其他样式表。

  /* 当满足是屏幕设备，且最大视口低于360px的设备中导入样式表phone.css */
  @import url("phone.css") screen and (max-width:360px) ;
  

  使用CSS中的 @import会增加HTTP请求，进而影响加载速度。

• 使用 @media使用媒体查询，指定匹配设备类型。推荐

• /* 在屏幕设备的最大宽度低于400px时把h1变成绿色 */
  @media screen and (max-device-width: 400px) {
      h1 { color: green; }
  }
  

  多数情况下可以不需要指定 screen，默认就是all即所有设备。

  @media (max-device-width: 400px) {
      h1 { color: green; }
  }
  

参考：

• 《响应式Web设计 HTML5和CSS3实战 第2版》ISBN：978-7-115-44655-8