读书笔记-媒体查询-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 在`<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