CSS Media Queries

初发布于 15 Apr 2015 | in CSS

本文为 W3C Recommendation Media Queries 文档阅读笔记。

一个媒体查询由一种 media type 和 0 个或多个 expressions（用于检查某种媒体特征的条件）构成。

通过使用媒体查询，可以为特定范围的输出设备量身定制样式，而不需要改变其内容。

一个媒体查询是一个逻辑表达式，要么为真要么为假。

当媒体查询的 media type 匹配上用户代理所运行的设备的媒体类型，且媒体查询中所有表达式都为真时，这个媒体查询才为真。

用法

用于所有类型设备的媒体查询，可以缺省关键字 all。

以下两句等价：
```
 @media all and (min-width:500px) { … }
 @media (min-width:500px) { … }
```
几个媒体查询可以组合在一个媒体查询列表里。由逗号分隔开。

在媒体查询语法中，, 代表逻辑或，关键字 and 代表逻辑与。因此媒体查询 list 中，只要有一个为真，则结果为真。
```
 @media screen and (color), projection and (color) { … }
```
如果媒体查询列表为空（描述为空字串或就是空格），则认为媒体查询结果为真

以下两句等价：
```
 @media all { … }
 @media { … }
```
逻辑非可以通过关键字 not 来表示。

那些只支持查询 media type 的用户代理将不识别关键字 not，相关联的样式表不会被应用。
```
 <link rel="stylesheet" media="not screen and (color)" href="example.css" />
```

关键字 only 也可以被用来对旧用户代理隐藏样式表。

 <link rel="stylesheet" media="only screen and (color)" href="example.css" />

注意：CSS 样式表通常大小写不敏感，媒体查询也是 case-insensitive。

Error Handling

Unknown media type，或者规定的媒体类型与设备不匹配

Unknown media features 未知的媒体特征，比如：

 @media aural and (device-aspect-ratio: 16/9) { … }
 @media screen and (max-weight: 3kg) { … }
 @media (min-orientation: portrait) { … }

Unknown media feature value 未知的媒体特征的取值

 @media (min-width: -100px) { … } /* 作为媒体特征的宽度不允许取负值 */
 @media (color:20example) { … }  /* unknown value for the ‘color’ */

Malformed media query 异常的媒体查询，在解析时遇到意外的 tokens

 @media &test, screen { … }
 @media all and(color) { … } /* having no space between ‘and’ and the expression is not allowed */
 @media test;,all { body { background:lime } } /* semicolon terminates the @media rule in CSS */

Media features 的类型和取值规范参阅文档，比较多，就不搬了。

除了使用 @media 引入媒体查询，还可以跟 HTML, XHTML, XML 以及 @import 一起用：

<link rel="stylesheet" media="screen and (color)" href="example.css" />

@import url(color.css) screen and (color);