读书笔记-媒体查询-1

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 在标签中使用媒体查询

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

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

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

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

1.2.3 在标签中使用媒体查询

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

• name="viewport"表示针对视口

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

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

• 禁止用户缩放网页 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