CSS3媒体查询

背景

（本节不具规范性）

HTML4 和 CSS2 目前支持针对不同媒体类型的媒体依赖样式表。例如，一个文档可能会对屏幕及印刷使用不同的样式表。在 HTML4 中，可以这样写：

 <link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
 <link rel="stylesheet" type="text/css" media="print" href="serif.css">

在 CSS 样式表内部，可以声明适于用该部分的媒体类型：

 @media screen {
   * { font-family: sans-serif }
 }

媒体类型“print”和“screen”在 HTML4 中定义。HTML4 中的完整媒体类型列表为：“aural”、“braille”、“handleld”、“print”、“projection”、“screen”、“tty”、“tv”。CSS2 也定义了相同的列表，但其中无视了“aural”类型，同时加入了“embossed”和“speech”类型。此外，“all”类型惯用于表明该样式表应用于所有媒体类型。

大多数用户代理支持媒体特定的样式表。最常用的特性是用来区分“screen”和“print”类型。

详细地描述样式表要应用于何种类型的输出设备，此前就有过这样的需求。幸运的是，HTML4 预料到了这种需求，并且定义了媒体类型向前兼容的语法。下面是从[6.13节]引用的：

新版本的 HTML 可能会引入新的值，并且可能会允许参数化的值。为了促进这些扩展的引入，符合标准的用户代理必须能够像下面这样解析media属性值：

其属性值是一个用逗号分隔的条目的列表。例如：

media="screen, 3d-glasses, print and resolution > 90dpi"

被映射到：

"screen"
"3d-glasses"
"print and resolution > 90dpi"

每个条目的首字母之前是被截断开的，首字母不能是 US ASCII 字母 [a-zA-Z]（Unicode十进制65-90、97-122）、数字[0-9]（Unicode 十六进制 30-39）或连字符（45）。例如下面给出的这样：
"screen"
"3d-glasses"
"print"

本规范所描述的媒体查询构建于HTML4概述的机制上。媒体查询的语法融入于 HTML4 中所保留的媒体类型语法。HTML4 的media属性同样存在于 XHTML 及一般的 XML 之中。相同的语法可以同样用于 CSS 内部的“@media”和“@import”规则之中。

不管怎样，媒体查询的解析规则与 HTML4 中的部分是不兼容的，而与 CSS 中的媒体查询是兼容的。

HTML5 （目前正在进行中的 HTML5 仍然是有效的）直接引用了此媒体查询规范，因此从 HTML 的规则中更新。

媒体查询

媒体查询包含媒体类型以及零或多个检查特定媒体特征条件的表达式。

本节中关于媒体查询的语句采取后面的语法章节中的描述。媒体查询不符合错误处理章节中讨论的语法。即：语法优先于本节中的需求。

 下列为HTML中的简单例子：
 
 <link rel="stylesheet" media="screen and (color)" href="example.css" />
 
 这个例子表明某样式表（example.css）将应用于拥有某特征（必须为彩色屏幕）的某媒体类型（“screen”）的设备。

 下列为在CSS中使用@import规则编写的相同媒体查询：
 
 @import url(example.css) screen and (color);

一个媒体查询是一个逻辑表达式。如果媒体查询中的媒体类型匹配运行用户代理的设备的媒体类型（定义于“应用于”行），且媒体查询中所有的表达式均为真，则媒体查询为真。

为适用于所有媒体类型的媒体查询提供了一个缩略语法；关键字“all”可以被忽略（包含后缀“and”）。即：如果没有明确给出媒体类型，则其为“all”。

 即：下列两句相同
 
 @media all and (min-width:500px) { … }
 
 @media (min-width:500px) { … }

可以将几个媒体查询合并为一个逗号分隔的媒体查询列表。如果逗号分隔的列表中的一或多个媒体查询为真，则整个列表为真，否则为假。在媒体查询语法中，逗号表示逻辑或，“and”关键字表示逻辑与。

 下面的例子中，CSS的@media规则中的几个媒体查询使用逗号分隔组成列表：
 
 @media screen and (color), projection and (color) { … }

如果媒体查询列表为空（例如，声明为空字符串或者由一个空格组成）其评估为真。

 即：下列两句相等
 
 @media all { … }
 
 @media { … }

逻辑非可以用“not”关键字表示。在媒体查询开始出的“not”关键字表示否定结果。即：如果媒体查询在没有“not”关键字时为真则其变为假。仅支持媒体类型的用户代理也不能识别“not”关键字，并且将不会应用相关的样式表。

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

关键字“only”可以用于从旧版本用户代理中因此样式表。用户代理在处理由“only”起始的媒体查询时必须按照“only”关键字不存在进行处理。

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

媒体查询语法可以用户HTML、XHTML、XML以及CSS的@import和@media规则。

 下列各句为在HTML、XHTML、XML、@import和@media中属性的相同实例：
 
 <link rel="stylesheet" media="screen and (color), projection and (color)" rel="stylesheet" href="example.css">
 
 <link rel="stylesheet" media="screen and (color), projection and (color)" rel="stylesheet" href="example.css" />
 
 <?xml-stylesheet media="screen and (color), projection and (color)" rel="stylesheet" href="example.css" ?>
 
 @import url(example.css) screen and (color), projection and (color);
 
 @media screen and (color), projection and (color) { … }

如果一个媒体特性没有在运行用户代理的设备上应用，调用该媒体特性的表达式为假。

 媒体特性“device-aspect-ratio”仅适用于视觉设备。在一个音频设备上，调用“device-aspect-ratio”的表达式将总是为假：
 
 <link rel="stylesheet" media="aural and (device-aspect-ratio: 16/9)" href="example.css" />

如果测量单位没有应用在设备上，则表达式将总是为假：

 “px”单位没有应用于“speech”设备上，所以下列媒体查询总是为假：
 
 <link rel="stylesheet" media="speech and (min-device-width: 800px)" href="example.css" />
 
 注意本例中的媒体查询，如果在媒体查询的起始位置加入关键字“not”，则该媒体查询将为真。

为了避免循环依赖，不能为了计算表达式而应用样式表。举例说明，一个印刷文档的宽高比可能会受到样式表的影响，但是调用“device-aspect-ratio”的表达式将给予用户代理的默认宽高比。

 我们期待用户代理（而不是需要）在响应用户环境中的修改时重新评估和重新布局，例如如果设备从风景向人像模式倾向。

语法

媒体查询语法在CSS2语法章节中描述。同样的，此处没有定义的规则实际上在CSS2中定义了。之后定义的media_query_list替代了CSS2中的media_list。

media_query_list
 : S* [media_query [ ',' S* media_query ]* ]?
 ;
media_query
 : [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
 | expression [ AND S* expression ]*
 ;
media_type
 : IDENT
 ;
expression
 : '(' S* media_feature S* [ ':' S* expr ]? ')' S*
 ;
media_feature
 : IDENT
 ;

CSS2中定义的COMMENT（注释）标记不会出现在此语法中（为了保持可读性），但是任意数量的该标记可能会出现在其他标记之间的任意位置。[CSS21]

下面的新的定义：

L  l|\\0{0,4}(4c|6c)(\r\n|[ \t\r\n\f])?|\\l
Y  y|\\0{0,4}(59|79)(\r\n|[ \t\r\n\f])?|\\y

下列是新的标记：

{O}{N}{L}{Y}      {return ONLY;}
{N}{O}{T}         {return NOT;}
{A}{N}{D}         {return AND;}
{num}{D}{P}{I}    {return RESOLUTION;}
{num}{D}{P}{C}{M} {return RESOLUTION;}

RESOLUTION（分辨率）是CSS2term（术语）中加入的。

CSS样式表通常是不区分大小写的，这同样适用于媒体查询。

除了语法一致外，为了保证一致性，每个媒体查询还需要按照各自的规范使用媒体类型和媒体特性。

下面的例子中只有第一个媒体查询符合规范。因为媒体类型“example”不存在。

@media all { body { background:lime } }

@media example { body { background:red } }

错误处理

对于不符合规范的媒体查询，用户代理需要遵守本节描述的规则。

• 未知媒体类型。对未知媒体类型的评估为假。有效的时候，对它们处理会与那些和当前设备的媒体类型不匹配的已知媒体类型相同。

除非unknown实际上为被支持的媒体类型，否则对媒体查询“unknown”的评估为假。同理，对“not unknown”的评估为真。

未知媒体类型与不匹配IDENT的媒体类型不同。后者术语畸形媒体类型范畴。

• 未知媒体特性。如果指定媒体特性之一未知，则用户代理将媒体查询表示为“not all”。

<link rel="stylesheet" media="screen and (max-weight: 3kg) and (color), (color)" href="example.css" />

在本例中，第一个媒体查询将表示为“not all”并且评估为假，对第二个媒体查询的评估好像第一个没有指定。

@media (min-orientation:portrait) { … }

由于“orientation”特性不接受“min-”前缀，其表示为“not all”。

• 未知媒体特性值。与未知媒体特性相似，如果指定媒体特性的值之一未知，则用户代理将媒体查询表示为“not all”。

媒体查询(color:20example)将一个未知的值指派给了“color”媒体特性，因此其表示为“not all”。

由于“width”媒体特性不允许负长度，因此下列媒体查询被表示为“not all”：

@media (min-width: -100px) { … }

• 畸形媒体查询。用户在从头至尾读取媒体查询并进行解析时，为了处理遇到的意外的标记，检查包含()、[]、{}、""和''在内的成对匹配规则以及正确处理转义。包含意外标记的媒体查询被表示为“not all”：

@media (example, all,), speech { /* 只适用于speech设备 */ }

@media &test, screen           { /* 只适用于screen设备 */ }

下面的例子中，由于在“and”和表达式之间没有空格是不允许的，该媒体查询是畸形的。（那时保留给功能符号的语法。）

@media all and(color) { … }

我们期望媒体查询遵循宿主语言的错误处理规则。

@media test;,all { body { background:lime } }

由于在CSS中分号终止了@media规则，该语句不能生效。

媒体特性

按照语法，媒体特性与CSS属性类似：它们拥有名字并且接受某些值。但是还是存在几点差异：

• 属性用于声明之中，用于给出关于如何呈现文档的信息。媒体特性用于表达式之中，用于描述对输出设备的要求。
• 大多数媒体特性接受可选的“min-”或“max-”前缀，用于表达“大于等于”和“小于等于”的限制。该语法用于避免“<”和“>”字符可能会出现的与HTML及XML的冲突。这些接受前缀的媒体特性大多数情况下都会使用前缀，但也可以单独使用。
• 在声明中属性总是需要一个值。另一方面，媒体特性可以不需要值。对于一个媒体特性feature，如果(feature:x)中的x在不是零或零之后跟随单位标识符（例如：不是0、0px、0em等）的情况下评估为真，则对(feature)的评估为真。拥有min/max前缀的媒体特性不能没有值。如果拥有min/max前缀的媒体特性没有值，则这回使得媒体查询畸形。
• 属性可能会接受复杂值。媒体特性仅接受单一值：一个关键字、一个数字或者一个带单位标识符的数字。（仅存的例外是“aspect-ratio”和“device-aspect-ratio”媒体特性。）

举例说明，媒体类型“color”可以使用不含值的表达式（“(color)”）或包含值的表达式（“(min-color: 1)”）。

本规范定义的媒体特性适用于视觉和触觉设备。同样的，媒体特性也可被定义为适用于听觉媒体类型。

width

值：

<length>（长度）

使用于：

视觉和触觉媒体类型

接受max/min前缀：

是

“width”媒体特性描述输出设备目标显示区域的宽度。对于连续媒体，其为视口（CSS2 9.1.1节）的宽度，其中包含已渲染的滚动条（如果存在）的大小。对于分页媒体，其为页面盒子（CSS2 13.2节）的宽度。

<length>不能指定负数。

举例说明：该媒体查询表示该样式表适用于宽于25cm的印刷输出：

<link rel="stylesheet" media="print and (min-width: 25cm)" href="http://…" />

该媒体查询表示该样式表适用于视口（文件渲染的部分屏幕/纸张）宽度在400至700像素之间的设备：

@media screen and (min-width: 400px) and (max-width: 700px) { … }

该媒体查询表示该样式表适用于视口宽度大于20em的屏幕及手持设备：

@media handheld and (min-width: 20em), screen and (min-width: 20em) { … }

“em”值与“font-size”的初始值相关

height

值：

<length>（长度）

使用于：

视觉和触觉媒体类型

接受max/min前缀：

是

“height”媒体特性描述输出设备目标显示区域的高度。对于连续媒体，其为视口的高度，其中包含已渲染的滚动条（如果存在）的大小。对于分页媒体，其为页面盒子的高度。

<length>不能指定负数。

device-width

值：

<length>（长度）

使用于：

视觉和触觉媒体类型

接受max/min前缀：

是

“device-width”媒体特性描述输出设备渲染表明的宽度。对于连续媒体，其为屏幕的宽度。对于分页媒体，其为页面纸张的宽度。

<length>不能指定负数。

@media screen and (device-width: 800px) { … }

在上面的例子里，样式表将仅能应用于显示器恰好为800水平像素的屏幕。“px”单位是逻辑类型，在单位章节中描述。

device-height

值：

<length>（长度）

使用于：

视觉和触觉媒体类型

接受max/min前缀：

是

“device-height”媒体特性描述输出设备渲染表明的高度。对于连续媒体，其为屏幕的高度。对于分页媒体，其为页面纸张的高度。

<length>不能指定负数。

<link rel="stylesheet" media="screen and (device-height: 600px)" />

在上面的例子里，样式表将仅能应用于显示器恰好为600垂直像素的屏幕。注意“px”单位的定义于CSS其他部分相同。

orientation

值：

portrait（纵向）、landscape（横向）

使用于：

位图媒体类型

接受max/min前缀：

否

若“height”媒体特性的值大于“width”媒体特性的值，则“orientation”媒体特性为“portrait”。否则“orientation”为“landscape”。

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

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

aspect-ratio

值：

<ratio>（比例）

使用于：

位图媒体类型

接受max/min前缀：

是

“aspect-ratio”媒体特性被定义为“width”媒体特性与“height”媒体特性的比例。

device-aspect-ratio

值：

<ratio>（比例）

使用于：

位图媒体类型

接受max/min前缀：

是

“device-aspect-ratio”媒体特性被定义为“device-width”媒体特性的值与“device-height”媒体特性的值的比例。

举例说明：如果屏幕设备拥有1280水平像素和720垂直像素（参考“16:9”），下列所有媒体查询均能匹配：

@media screen and (device-aspect-ratio: 16/9) { … }

@media screen and (device-aspect-ratio: 32/18) { … }

@media screen and (device-aspect-ratio: 1280/720) { … }

@media screen and (device-aspect-ratio: 2560/1440) { … }

color

值：

<integer>（整数）

使用于：

视觉媒体类型

接受max/min前缀：

是

“color”媒体特性描述输出设备上每个颜色的位数。如果设备并非彩色设备，该值为零。

<integer>不能为负数。

举例说明：下列两个媒体查询表示样式表适用于所有彩色设备：

@media all and (color) { … }

@media all and (min-color: 1) { … }

该媒体查询表示样式表适用于每个颜色至少拥有2位的彩色设备：

@media all and (min-color: 2) { … }

如果不同颜色由不同比特数表示，则使用最小数字。

例如：如果8比特颜色系统使用3比特表示红色、3比特表示绿色、2比特表示蓝色，则“color”媒体特性的值为2。

在拥有颜色索引的设备中，将使用查找表中每个色彩的最小比特数。

color-index

值：

<integer>（整数）

使用于：

视觉媒体类型

接受max/min前缀：

是

“color-index”媒体特性描述输出设备的颜色查找表中的数目。如果设备没有使用彩色查找表，则该值为零。

<integer>不能为负数。

举例说明：下列两个媒体查询表示样式表适用于所有彩色索引设备：

@media all and (color-index) { … }

@media all and (min-color-index: 1) { … }

该媒体查询表示样式表适用于拥有256个以上颜色的彩色索引设备：

<?xml-stylesheet media="all and (min-color-index: 256)" href="http://www.example.com/…" ?>

monochrome

值：

<integer>（整数）

使用于：

视觉媒体类型

接受max/min前缀：

是

“monochrome”媒体特性描述单色帧缓冲区中每像素所使用的位数。如果设备不是单色设备，则输出设备值为0。

<integer>不能为负数。

举例说明：下列两个媒体查询表示样式表适用于所有单色设备：

@media all and (monochrome) { … }

@media all and (monochrome: 1) { … }

该媒体查询表示样式表适用于每像素使用2位的单色设备：

@media all and (min-monochrome: 2) { … }

下列媒体查询表示一个样式表适用于彩色纸张，另一个适用于单色纸张：

<link rel="stylesheet" media="print and (color)" href="http://…" />

<link rel="stylesheet" media="print and (monochrome)" href="http://…" />

resolution

值：

<resolution>（分辨率）

使用于：

位图媒体类型

接受max/min前缀：

是

“resolution”媒体特性描述输出设备的分辨率，例如，像素密度。若查询设备的非方形像素，在“min-resolution”查询中指定的值必须与最稀疏尺寸进行比较，在“max-resolution”查询中必须与最密集尺寸进行比较。对于“resolution”（没有“min-”或“max-”前缀）查询从不查询设备的非方形像素。

对于印刷机，相当于分辨率（任意颜色的绘制点的分辨率）。

举例说明：该媒体查询表示样式表适用于分辨率大于每英寸300点的设备：

@media print and (min-resolution: 300dpi) { … }

该媒体查询表示样式表适用于每里面118点的设备：

@media print and (min-resolution: 118dpcm) { … }

scan

值：

progressive（逐行）、interlace（交错）

使用于：

“tv”媒体类型

接受max/min前缀：

否

“scan”媒体特性描述“tv”输出设备的扫描进程。

举例说明：该媒体查询表示样式表适用于逐行扫描的电视设备：

@media tv and (scan: progressive) { … }

grid

值：

<integer>（整数）

使用于：

视觉和触觉媒体类型

接受max/min前缀：

否

“grid”媒体特性用于查询输出设备是等宽还是位图。如果输出设备是基于等宽的（例如“tty”中断或者仅能显示一种固定字体的移动电话），其值为1。否则其值为0。

有效值仅包含0和1。（包含-0。）其他所有值均造成媒体查询畸形。

@media handheld and (grid) and (max-width: 15em) { … }

@media handheld and (grid) and (device-max-height: 7em) { … }

值

本规范介绍两个新值。

<ratio>值是一个正（非零非负）<integer>，其后跟随可选的空白，其后跟随一个斜线（“/”），其后跟随可选的空白，其后跟随一个正<integer>。

<resolution>值是一个正<number>，其后直接跟随一个单位标识符（“dpi”或“dpcm”）。

空白、<integer>、<number>以及其他本规范所使用的值均与CSS的其他部分所使用的相同，规范的定义在[CSS21]。

单位

媒体查询所使用的单位与CSS其他部分中的相同。举例说明：像素单位表示CSS像素而非物理像素。

媒体查询中的相对单位基于初始值，这意味着这些单位不会基于声明的结果。举例说明：在HTML中“em”单位与“font-size”的初始值相关。

分辨率

“dpi”与“dpcm”单位描述输出设备的分辨率，即：设备像素的密度。分辨率单位标识符如下：

dpi

每CSS“inch”（英寸）中的点数。

dpcm

每CSS“centimeter”（厘米）中的点数。

在本规范中，这些单位仅用于“resolution”媒体类型。