Media Queries

W3C Recommendation Media Queries

本文为文档阅读笔记。

Media-specific style sheets are supported by several user agents. The most commonly used feature is to distinguish between ‘screen’ and ‘print’.

指定媒体的样式表被一些用户代理支持。 最常用的特征是区分 screen 屏幕 和 print 打印机。

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.

一个媒体查询有一种媒体类型和0个或多个表达式（用于检查某种媒体特征的条件）构成。在那些媒体特征里可以被用于媒体查询是 宽度、高度和颜色。

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

A media query is a logical expression that is either true or false. A media query is true if the media type of the media query matches the media type of the device where the user agent is running (as defined in the "Applies to" line), and all expressions in the media query are true. 

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

Ex1：

A shorthand syntax is offered for media queries that apply to all media types; the keyword ‘all’ can be left out (along with the trailing ‘and’). I.e. if the media type is not explicitly given it is ‘all’.

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

以下两句等价：

@media all and (min-width:500px) { … }@media (min-width:500px) { … }

同样：

@media (orientation: portrait) { … }@media all and (orientation: portrait) { … }

Ex2：

Several media queries can be combined in a media query list. A comma-separated list of media queries.

几个媒体查询可以结合在一个媒体查询列表里。由逗号分隔开。

In the media queries syntax, the comma expresses a logical OR, while the ‘and’ keyword expresses a logical AND. 

在媒体查询语法中，逗号代表逻辑或，关键字 and 代表逻辑与。

@media screen and (color), projection and (color) { … }

Ex3：

If the media query list is empty (i.e. the declaration is the empty string or consists solely of whitespace) it evaluates to true.

如果媒体查询列表为空（描述为空字串或就是一些空格），则认为媒体查询结果为真

以下两句等价：

@media all { … }@media { … }

Ex4：

The logical NOT can be expressed through the ‘not’ keyword. User agents that only support media types (as described in HTML4) will not recognize the ‘not’ keyword and the associated style sheet is therefore not applied.

逻辑非可以通过关键字 not 来表示。那些只支持媒体类型的用户代理将不识别关键字 not， 因此相关联的样式表不会被应用。

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

Ex5：

The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

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

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

注意：

1. 当媒体功能不适用于在运行的用户代理时，相关表达式的值将为假。比如，在听觉设备上 device-aspect-radio 是不适用的。

2. 当测量单位不适用于设备时，表达式将为假。比如语音设备上 “px” 单位是不适用的。

3. CSS style sheets are generally case-insensitive, and this is also the case for media queries. CSS 样式表通常大小写不敏感，媒体查询也是。

Error Handling

1. Unknown media type 未知的媒体类型

2. Unknown media features 未知的媒体特征 ex: screen and (max-weight: 3kg)

3. Unknown media feature value 未知的媒体特征的取值 ex: @media (min-width: -100px) {...} 作为媒体特征的宽度不允许取负值！

4. Malformed media query 异常的媒体查询

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

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