媒体查询 第 4 级

1. 引言

本节不具有规范性。

1997 年，HTML4 [HTML401] 定义了一种机制，用于支持依赖媒体的样式表， 针对不同的媒体类型进行定制。 例如，文档可以为屏幕和打印分别使用不同的样式表。 在 HTML 中，可以写成：

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

CSS 通过其 @media 与 @import 规则对该功能进行了改造与扩展， 增加了查询各个单独特性的值的能力：

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

@import "print-styles.css" print;

媒体查询可与 HTML、XHTML、XML [xml-stylesheet] 以及 CSS 的 @import 与 @media 规则一起使用。

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

<link 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) { … }

1.1. 模块交互

本模块替换并扩展了在 [CSS2] 第 7 节以及 [MEDIAQUERIES-3] 中定义的媒体查询、媒体类型与媒体特性。

1.2. 值

本规范未定义的值类型，例如 <integer>、<number> 或 <resolution>，定义在 [CSS-VALUES-3] 中。其他 CSS 模块可能会扩展这些值类型的定义。

1.3. 单位

媒体查询中使用的单位与 CSS 其他部分相同，按 [CSS-VALUES-3] 中的定义解释。例如，像素单位表示 CSS 像素， 而不是物理像素。

相对长度单位在媒体查询中是基于初始值的， 这意味着这些单位永远不会基于声明计算后的结果。例如在 HTML 中， em 单位相对于 初始值的 font-size， 由用户代理或用户偏好定义， 而不是页面上的任何样式。

2. 媒体 查询

媒体查询是一种用于测试用户代理 或文档显示所在设备某些方面的方法。媒体查询（几乎）总是与文档内容无关， 与其样式无关， 也与任何其他内部方面无关； 除非某个特性明确规定它会影响媒体查询的解析， 否则它们只依赖于“外部”信息。

媒体查询的语法由以下部分组成： 可选的媒体查询修饰符、 可选的媒体类型， 以及零个或多个媒体特性：

媒体查询是一个逻辑表达式，其结果为真或假。 媒体查询为真当且仅当：

• 若指定了媒体类型， 则它与用户代理运行所在设备的媒体类型匹配，并且

• 媒体条件为真。

本节中关于媒体查询的陈述假定遵循语法一节。 不符合该语法的媒体查询在 § 3.2 错误处理 中讨论。 即：语法优先于本节中的要求。

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

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

用户代理必须在其已知的用户环境变化时重新求值媒体查询， 例如设备从横向平铺变为纵向平铺， 并相应地改变任何依赖这些媒体查询的构造的行为。

除非某个特性明确规定它会影响媒体查询的解析，否则不需要为了求值表达式而应用样式表。

2.1. 组合媒体查询

多个媒体查询可以组合成一个以逗号分隔的 媒体查询列表。

媒体查询列表为真， 当其任意组成的媒体查询为真； 仅当其所有组成的媒体查询都为假时才为假。

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

空的媒体查询列表求值为真。

@media all { … }
@media { … }

2.2. 媒体查询修饰符

媒体查询可选地以前置一个单独的 媒体查询修饰符， 该修饰符是一个关键字，用于改变后续媒体查询的含义。

2.2.1. 否定媒体查询：not 关键字

单个媒体查询可以通过在前面加上关键字 not 来取反。 如果媒体查询原本会求值为真， 在其前面加上 not 会让它求值为假，反之亦然。

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

2.2.2. 对旧版用户代理隐藏媒体查询：only 关键字

媒体查询这一概念源自 HTML4 [HTML401]。 该规范只定义了媒体类型， 但提供了一个向前兼容的语法，可容纳未来新增的概念（如媒体特性）： 它会消耗媒体查询中直到遇到第一个非字母数字字符为止的字符， 并将其解释为媒体类型， 其余部分则忽略。 例如，媒体查询 screen and (color) 会被截断为仅 screen。

不幸的是，这意味着采用该错误处理行为的旧版用户代理 会忽略媒体特性在 媒体查询中的存在， 即便这些特性远比查询中的媒体类型更重要。 这可能导致样式在不合适的场景中被意外应用。

为了将这些媒体查询对旧版用户代理隐藏， 可在媒体查询前加上关键字 only。 only 关键字对媒体查询的结果没有影响， 但会使旧版用户代理将该媒体查询解析为指定了未知的媒体类型“only”， 从而将其忽略。

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

注：请注意，only 关键字只能用在 媒体类型之前。 仅由媒体特性组成的 媒体查询， 或者带有其他媒体查询修饰符（如 not）的媒体查询， 会被旧版用户代理自动视为假。

注：在发布本规范时， 这类旧版用户代理极为罕见， 因此使用 only 修饰符很少（如果有的话）是必要的。

2.3. 媒体类型

A 媒体类型 是一种宽泛的 用户代理设备类别， 文档可以在其上显示。 最初的一组 媒体类型 定义于 HTML4， 用于 <link> 元素上的 media 属性。

不幸的是，媒体类型 已被证明不足以作为区分 具有不同样式需求的设备的方式。 一些最初相当不同的类别， 例如 screen 与 handheld， 在其提出后的这些年里已显著融合。 另一些，例如 tty 或 tv， 相对于功能齐全的计算机显示器这一常态，暴露出有用的差异， 因而在理论上可用于通过不同样式进行定向， 但将 媒体类型 定义为互斥 使得以合理方式使用它们变得困难； 相反，它们的互斥方面更适合表达为 媒体特性， 例如 grid 或 scan。

因此，以下 媒体类型 被定义用于 媒体 查询：

all

匹配所有设备。

print

匹配打印机，以及旨在复现打印显示的设备， 例如在“打印预览”中显示文档的 Web 浏览器。

screen

匹配所有不被 print 匹配的设备。

此外，定义了以下 已弃用 的 媒体类型。 作者不得使用这些 媒体类型； 相反，建议选择能更好表示其正在针对之设备方面的合适 媒体特性。

用户代理必须将以下 媒体类型 识别为有效， 但必须使它们不匹配任何东西。

• tty
• tv
• projection
• handheld
• braille
• embossed
• aural
• speech

注：预计所有媒体类型也将随着时间推移而被弃用， 因为会定义出适当的 媒体特性 来捕捉它们的重要差异。

2.4. 媒体特性

A 媒体特性 是一种比 媒体类型 更细粒度的测试， 用于测试用户代理或显示设备的某个单一、特定特性。

从语法上讲，媒体特性 类似于 CSS 属性： 它们由特性名称、冒号以及要测试的值组成。 它们也可以用布尔形式书写，仅写特性名称， 或用带比较运算符的范围形式书写。

不过，属性与媒体特性之间存在若干重要差异：

• 属性用于提供关于如何呈现文档的信息。 媒体特性用于描述输出设备的需求。
• 媒体特性总是用括号包裹， 并使用 and 或 or 关键字组合， 例如 (color) and (min-width: 600px)， 而不是用分号分隔。
• 媒体特性可以仅给出其名称 （省略冒号和值）， 以在 布尔上下文中对该特性求值。 这对于那些存在合理取值可代表 0 或“无”的特性，是一种便捷的简写。 例如，(color) 在 color 媒体特性 非零时为真。
• 具有“range”类型的 媒体特性 可以写成 范围上下文， 该上下文使用标准的数学比较运算符而不是冒号， 或者其特性名称可以 以前缀“min-”或“max-” 的形式出现。
• 属性有时接受复杂的值， 例如涉及多个其他值的计算。媒体特性 只接受单一值：一个关键字、一个数字等。

如果某个 媒体特性 引用了 在 UA 运行所在设备上不存在的概念 （例如，语音 UA 没有“宽度”的概念）， 则该 媒体特性 必须始终求值为假。

<link media="speech and (device-aspect-ratio: 16/9)"
      rel="stylesheet" href="example.css">

2.4.1. 媒体特性类型：“range” 与 “discrete”

每个媒体特性都会在其定义表中将其“类型”定义为 “range” 或 “discrete”。

“discrete” 媒体特性， 例如 pointer，其取值来自一个集合。 这些值可以是关键字 或布尔数字（0 与 1）， 但共同点在于它们没有内在的“顺序”——​没有任何值“更小”或“更大”。

另一方面，“range” 媒体特性，例如 width， 其取值来自一个范围。 任意两个值都可以比较出谁更小、谁更大。

这两种类型唯一显著的差异在于：“range” 媒体特性 可在 范围上下文 中求值，并且其名称可接受 “min-” 与 “max-” 前缀。 这两种写法都会改变该特性的含义——​不再是当特性恰好匹配给定值时为真， 而是当特性大于/小于/等于给定值时匹配。

2.4.2. 在布尔上下文中求值媒体特性

虽然 媒体特性 通常 具有类似 CSS 属性的语法， 但它们也可以更简单地仅写特性名称， 如 (color)。

以这种形式书写时，媒体 特性 会在 布尔上下文 中求值。 若该特性在除数字 0 之外的任意值下都会为真， 或者为真但取值为 0 的 <dimension>， 或关键字 none， 则该 媒体特性 求值为真。 否则，求值为假。

2.4.3. 在范围上下文中求值媒体特性

具有 “range” 类型的 媒体特性 也可以改用 范围上下文 来书写， 该上下文利用其取值有序这一事实， 使用普通的数学比较运算符：

注：此语法为 Mediaqueries 第 4 级新增， 因此目前的支持范围不如 min-/max- 前缀那样广。

基本形式 由特性名称、比较运算符与一个值组成， 当该关系成立时返回真。

其余形式中， 特性名称嵌套在两次值比较之间， 当两次比较都为真时返回真。

某些 “range” 类型的媒体特性被称为 在负值范围内为假。 这意味着负值是有效的且必须能被解析，并且 查询该媒体特性是否等于、小于、或小于等于 任何这样的负值时必须求值为假。 查询该媒体特性是否大于、或大于等于某个负值时， 若该关系成立则求值为真。

注：如果在解析时改为拒绝负值， 它们将根据错误处理规则被视为 unknown。 然而在现实中， 设备的 resolution 是否为 -300dpi 并非未知， 而是已知为假。 同样，对于任何视觉设备， 目标显示区域的 width 已知大于 -200px 上述规则反映了这一点， 让直觉与 UA 的行为一致。

@media not (width <= -100px) {
  body { background: green; }
}

@media (height > -100px) {
  body { background: green; }
}

@media not (resolution: -300dpi) {
  body { background: green; }
}

2.4.4. 在范围特性上使用 “min-” 与 “max-” 前缀

与其在范围上下文中求值 “range” 类型的 媒体特性（如上所述）， 该特性也可以写成普通的 媒体特性， 但在特性名称前加上 “min-” 或 “max-” 前缀。

这等价于在 范围上下文 中对该特性求值， 如下所示：

• 在特性名称前使用 “min-” 前缀等价于使用 “>=” 运算符。 例如，(min-height: 600px) 等价于 (height >= 600px)。
• 在特性名称前使用 “max-” 前缀等价于使用 “<=” 运算符。 例如，(max-width: 40em) 等价于 (width <= 40em)。

注：由于 “min-” 与 “max-” 都等价于包含该值的范围比较， 在某些场景下它们可能会带来限制。

@media (max-width: 320px) { /* 适用于视口宽度 <= 320px 的样式 */ }
@media (min-width: 321px) { /* 适用于视口宽度 >= 321px 的样式 */ }

@media (max-width: 320px) { /* 适用于视口宽度 <= 320px 的样式 */ }
@media (min-width: 320.01px) { /* 适用于视口宽度 >= 320.01px 的样式 */ }

@media (width <= 320px) { /* 适用于视口宽度 <= 320px 的样式 */ }
@media (width > 320px) { /* 适用于视口宽度 > 320px 的样式 */ }

“discrete” 类型属性不接受 “min-” 或 “max-” 前缀。 给 “discrete” 类型 媒体特性 加上此类前缀只会导致其特性名称未知。

试图在 布尔上下文 中对带 min/max 前缀的 媒体特性 求值是无效的，并构成语法错误。

2.5. 组合媒体特性

多个 媒体特性 可以使用完整的布尔代数 （not、and、or） 组合成一个 媒体条件。

• 任何媒体特性都可以通过在其前放置 not 来取反。 例如，not (color) 会反转 (color) 的含义——​由于 (color) 匹配任何具有某种彩色显示能力的设备， not (color) 则匹配不具备任何彩色显示能力的设备。

• 两个或更多媒体特性可以串联在一起， 使得仅当所有媒体特性都为真时查询才为真， 通过在它们之间放置 and 实现。 例如，(width < 600px) and (height < 600px) 只会匹配屏幕在两个维度上都小于 600px 的设备。

• 或者，两个或更多媒体特性也可以串联在一起， 使得只要任意媒体特性为真，查询就为真， 通过在它们之间放置 or 实现。 例如，(update: slow) or (hover: none) 在设备更新屏幕很慢（例如电子阅读器）或 主指点设备不具备悬停能力时匹配， 这可能表明应使用一种布局来显示更多信息， 而不是紧凑地隐藏信息直到用户悬停时才显示。

• 媒体条件 可以通过用括号 () 包裹来分组， 然后像单个媒体查询一样嵌套在条件中。 例如，(not (color)) or (hover) 在单色设备和/或具备悬停能力的设备上为真。 若希望查询一个既是单色且不具备悬停能力的设备， 则必须写作 not ((color) or (hover))（或等价地写作 (not (color)) and (not (hover))）。

在媒体查询的同一“层级”上混用 and 与 or 以及 not 是无效的。 例如，(color) and (pointer) or (hover) 是非法的， 因为其含义不明确。 相反，可以使用括号将使用某个连接关键字的内容分组， 得到 (color) and ((pointer) or (hover)) 或 ((color) and (pointer)) or (hover)。 这二者含义非常不同： 若只有 (hover) 为真， 第一个会求值为假， 而第二个会求值为真。

3. 语法

媒体查询语法的非正式描述出现在前述章节的行文与铁路图中。 本节描述形式化的媒体查询语法， 其中规则/属性语法所用的文法符号定义于 [CSS-SYNTAX-3] 与 [CSS-VALUES-3]。

要解析 <media-query-list> 产生式，先 解析一个以逗号分隔的组件值列表， 然后将返回列表中的每一项解析为一个 <media-query>。 其值为由此生成的 <media-query> 的列表。

注：对 <media-query-list> 解析的这一显式定义 对于使 媒体查询列表 的错误恢复行为具备良好定义是必要的。

注：此 <media-query-list> 解析定义有意接受空列表。

注：根据 [CSS-SYNTAX-3]， token 是 ASCII 不区分大小写 的。

<media-query> = <media-condition>
             | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?
<media-type> = <ident>

<media-condition> = <media-not> | <media-in-parens> [ <media-and>* | <media-or>* ]
<media-condition-without-or> = <media-not> | <media-in-parens> <media-and>*
<media-not> = not <media-in-parens>
<media-and> = and <media-in-parens>
<media-or> = or <media-in-parens>
<media-in-parens> = ( <media-condition> ) | ( <media-feature> ) | <general-enclosed>

<media-feature> = [ <mf-plain> | <mf-boolean> | <mf-range> ]
<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> <mf-comparison> <mf-value>
           | <mf-value> <mf-comparison> <mf-name>
           | <mf-value> <mf-lt> <mf-name> <mf-lt> <mf-value>
           | <mf-value> <mf-gt> <mf-name> <mf-gt> <mf-value>
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>
<mf-lt> = '<' '='?
<mf-gt> = '>' '='?
<mf-eq> = '='
<mf-comparison> = <mf-lt> | <mf-gt> | <mf-eq>

<general-enclosed> = [ <function-token> <any-value>? ) ] | [ ( <any-value>? ) ]

<media-type> 产生式不包含关键字 only、 not、and、or 与 layer。

注：排除 layer 的原因是： 否则当其用于 @import url(…) layer; 这一语法时会产生歧义， 而该语法用于 级联层。 参见 [CSS-CASCADE-5]。

若存在 “=” ，则不允许在 “<” 或 “>” 的 <delim-token> 与其后的 “=” <delim-token> 之间出现空白。

注：在 not、and 或 or 关键字与其后的 ( 字符之间需要空白， 因为若没有空白，它将被解析为 <function-token>。 这并未被显式标为无效， 因为已被上面的文法涵盖。 不过，在 ) 与后续关键字之间出现空白是可以的。

解析 <media-in-parens> 产生式时， 只有当输入不匹配前两个分支时， 才能选择 <general-enclosed> 分支。 <general-enclosed> 的存在是为了以一种相对兼容的方式 支持未来对文法的扩展。

3.1. 求值媒体查询

<media-condition> 或 <media-condition-without-or> 的每个主要子表达式 都关联一个布尔结果，如下所示：

<media-condition>

<media-condition-without-or>

结果为其子表达式的结果。

<media-in-parens>

结果为其子项的结果。

<media-not>

结果为对 <media-in-parens> 子项取反的结果。 对 unknown 取反仍为 unknown。

<media-in-parens> <media-and>*

若 <media-in-parens> 子项 以及 <media-and> 子项中的所有 <media-in-parens> 子项均为真，则结果为真； 若其中至少一个 <media-in-parens> 子项为假，则结果为假； 其余情况为 unknown。

<media-in-parens> <media-or>*

若 <media-in-parens> 子项 以及 <media-or> 子项中的所有 <media-in-parens> 子项均为假，则结果为假； 若其中至少一个 <media-in-parens> 子项为真，则结果为真； 其余情况为 unknown。

<general-enclosed>

结果为 unknown。

作者不得在其样式表中使用 <general-enclosed>。 它仅为未来兼容性而存在， 使得新的语法增补不会在旧版用户代理中令过多的 <media-condition> 失效。

<media-feature>

结果为对指定媒体特性求值的结果。

若上述任一产生式的结果 用在期望二值布尔值的上下文中， 则必须将 “unknown” 转换为 “false”。

注：这意味着， 例如，当 媒体查询 用于 @media 规则时， 若其解析为 “unknown”，它会被当作 “false” 并且不匹配。

3.2. 错误处理

不匹配前一节文法的媒体查询在解析时必须被替换为 not all。

注：请注意，文法不匹配不会抹除整个 媒体查询列表， 只会抹除有问题的那条 媒体查询。 上述解析行为会在下一个顶层逗号处自动恢复。

@media (example, all,), speech { /* 仅适用于语音设备 */ }
@media &test, speech           { /* 仅适用于语音设备 */ }

@media (example, speech { /* 语音设备规则 */ }

未知的 <media-type> 必须被视为不匹配。

未知的 <mf-name> 或 <mf-value>， 或者某个特性值不匹配该 媒体特性 的值语法， 会导致结果为 “unknown”。 值为 “unknown” 的 <media-query> 必须被替换为 not all。

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

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

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

4. 视口/页面尺寸媒体特性

4.1. 宽度：width 特性

width 媒体特性描述输出设备的目标显示区域的宽度。 对于 连续媒体， 这指视口的宽度 （如 CSS2 第 9.1.1 节所述 [CSS2]） 并包含渲染出的滚动条尺寸（如有）。 对于 分页媒体， 这指页面框的宽度 （如 CSS2 第 13.2 节所述 [CSS2]）。

<length> 按照 § 1.3 单位 进行解释。

width 在负值范围内为假。

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

@media (400px <= width <= 700px) { … }

@media (min-width: 20em) { … }

4.2. 高度：height 特性

height 媒体特性描述输出设备目标显示区域的高度。 对于 连续媒体， 这指视口的高度，并包含渲染出来的滚动条尺寸（如有）。 对于 分页媒体， 这指页面框的高度。

<length> 按照 § 1.3 单位 进行解释。

height 在 负值范围内为假。

4.3. 纵横比：aspect-ratio 特性

aspect-ratio 媒体特性定义为 width 媒体特性的值 与 height 媒体特性的值之比。

4.4. 方向：orientation 特性

portrait

当 height 媒体特性的值 大于或等于 width 媒体特性的值时， orientation 媒体特性为 portrait。

landscape

否则，orientation 为 landscape。

@media (orientation: portrait) { … }

5. 显示质量媒体特性

5.1. 显示分辨率：resolution 特性

resolution 媒体特性描述输出设备的分辨率， 即像素密度；它会考虑 页面缩放，但假定 缩放因子 为 1.0。

resolution 媒体特性在 负值范围内为假

当查询非正方形像素的媒体时，resolution 查询的是垂直维度上的密度。

对于打印机，这对应于加网分辨率 （用于打印任意颜色网点的分辨率）。 打印机在灰度打印时可能具有不同的分辨率。

对于在分辨率上没有物理约束的输出介质 （例如输出到矢量图形）， 该特性必须匹配 infinite 值。 为了在 范围上下文 中对该媒体特性求值， infinite 必须 被视为大于任何可能的 <resolution>。 （也就是说，类似 (resolution > 1000dpi) 的查询，在 infinite 介质上将为真。）

@media (resolution >= 2dppx)

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

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

5.2. 显示类型：scan 特性

scan 媒体特性描述某些输出设备的扫描过程。

interlace

CRT 与某些等离子电视屏幕使用“隔行”渲染， 视频帧在仅指定屏幕上的“偶数行” 与仅指定“奇数行”之间交替， 利用多种自动的心理图像校正能力来产生平滑的运动效果。 这让它们能以一半带宽成本模拟更高 FPS 的广播。

在隔行屏幕上显示时， 作者应避免屏幕上非常快速的移动以避免“梳齿”效应， 并应确保屏幕上的细节宽于 1px，以避免 “twitter”。

progressive

使用“逐行”渲染的屏幕会完整显示每一帧画面， 不需要特殊处理。

大多数现代屏幕以及所有计算机屏幕都使用逐行渲染。

@media (scan: interlace) { body { font-family: sans-serif; } }

注：在撰写本文时，所有已知实现都匹配 scan: progressive，而不是 scan: interlace。

5.3. 检测控制台显示：grid 特性

<mq-boolean> = <integer [0,1]>

grid 媒体特性用于查询输出设备是网格还是位图。 如果输出设备是基于网格的 （例如“tty”终端，或仅有一种固定字体的手机显示）， 其值将为 1。 否则，其值将为 0。

<mq-boolean> 值类型是一个取值为 0 或 1 的 <integer>。 其他任何整数值都无效。 注意 -0 在 CSS 中始终等价于 0， 因而也被接受为有效的 <mq-boolean> 值。

注：<mq-boolean> 类型仅因遗留目的而存在。 若今天重新设计该特性， 它将改为为其值使用适当的具名关键字。

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

注：在撰写本文时，所有已知实现都匹配 grid: 0，而不是 grid: 1。

5.4. 显示更新频率：update 特性

update 媒体特性用于查询输出设备在内容被渲染之后 修改其外观的能力。 它接受以下值：

none

一旦渲染完成，布局将不再能被更新。 示例：打印在纸上的文档。

slow

布局可按照通常的 CSS 规则动态变化， 但输出设备渲染或显示变化的速度不够快， 以至于这些变化无法被感知为平滑动画。 示例：电子墨水屏或性能严重不足的设备。

fast

布局可按照通常的 CSS 规则动态变化， 且输出设备在速度上没有异常受限， 因而可以使用如 CSS 动画这类需要规律更新的内容。 示例：计算机屏幕。

@media (update) {
  a { text-decoration: none; }
  a:hover, a:focus { text-decoration: underline; }
}
/* 在不更新的 UA 中，链接始终获得其默认下划线。 */

5.5. 块轴溢出：overflow-block 特性

overflow-block 媒体特性描述设备在 内容沿 块轴 溢出初始包含块时的行为。

none

在 块 轴 上没有溢出可用的处理方式； 任何溢出的内容都将直接不显示。 示例：广告牌

scroll

在 块轴 上的溢出内容会通过允许用户滚动来暴露出来。 示例：计算机屏幕

paged

内容被拆分为离散页面； 沿 块轴 溢出某一页的内容会显示在下一页。 示例：打印机、电子书阅读器

匹配 none 或 scroll 的媒体被称为 连续 媒体， 而匹配 paged 的媒体被称为 分页媒体

注：未来可能会为该媒体特性添加附加值， 用于描述具有混合行为的用户代理类别， 其行为结合了 连续 与 分页媒体 的某些方面。 例如，Presto 布局引擎（现已停止）曾提供一种半分页的演示模式行为， 类似于 continuous，但它会遵循强制分页符。 由于不了解当前仍在发布的、具有此类行为的用户代理， 工作组决定在本级中不添加此类值， 以避免对任何此类用户代理造成误描述。 鼓励任何实现了无法被上述任何值充分描述的用户代理的人员 联系工作组， 以便考虑对此媒体特性进行扩展。

5.6. 行内轴溢出：overflow-inline 特性

overflow-inline 媒体特性描述设备在 内容沿 行内轴 溢出初始包含块时的行为。

none

在 行内 轴 上没有溢出可用的处理方式； 任何溢出的内容都将直接不显示。

scroll

在 行内 轴 上的溢出内容会通过允许用户滚动来暴露出来。

注：没有已知实现支持行内方向的分页式溢出， 且这一概念本身似乎也并不太合理， 因而 overflow-inline 有意不提供 paged 值。

6. 颜色媒体特性

6.1. 色彩深度：color 特性

color 媒体特性描述输出设备每个颜色分量所用的比特数。 如果该设备不是彩色设备，则值为零。

color 在 负值范围内为假。

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

@media (color >= 8) { … }

如果不同颜色分量用不同的比特数表示， 则使用其中最小的比特数。

在使用索引色的设备中， 使用查找表中每个颜色分量的最小比特数。

注：所描述的功能只能在表层上描述颜色能力。 color-gamut 通常与作者的需求更相关。 若需要进一步功能， RFC2879 [RFC2879] 提供了更具体的媒体特性， 可能会在后续阶段得到支持。

6.2. 调色板彩色屏幕：color-index 特性

color-index 媒体特性描述输出设备颜色查找表中的条目数量。 如果设备不使用颜色查找表，则值为零。

color-index 在 负值范围内为假。

@media (color-index) { … }
@media (color-index >= 1) { … }

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

6.3. 单色屏幕：monochrome 特性

monochrome 媒体特性描述单色帧缓冲中每像素的比特数。 如果设备不是单色设备， 输出设备值将为 0。

monochrome 在 负值范围内为假。

@media (monochrome) { … }

@media (monochrome >= 2) { … }

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

6.4. 色彩显示质量：color-gamut 特性

color-gamut 媒体特性描述 UA 与输出设备所支持的大致颜色范围。 也就是说，如果 UA 接收到处于指定色彩空间中的内容颜色， 它能够让输出设备渲染出相应的颜色， 或渲染出足够接近的颜色。

注：该查询使用“大致”范围有几个原因。 首先，显示硬件存在大量差异。 例如，某设备可能声称支持 “Rec. 2020”， 但实际上渲染出的范围显著小于其完整色域。 其次，不同设备支持的色彩范围多种多样， 将它们全部枚举会很繁琐。 在大多数情况下，作者并不需要知道显示器的精确能力， 只需知道它是否优于 sRGB， 或是否显著优于 sRGB。 这样就可以向用户提供合适的图像， 并为其标注色彩配置文件。

srgb

UA 与输出设备可支持大致等于 sRGB 色域或更大的色域。

注：预计绝大多数彩色显示器 都能对该类型查询返回 true。

p3

UA 与输出设备可支持大致等于 Display P3 [Display-P3] 色彩空间所指定色域或更大的色域。

注：p3 色域 大于并包含 srgb 色域。

rec2020

UA 与输出设备可支持大致等于 ITU-R Recommendation BT.2020 色彩空间所指定色域或更大的色域。

注：rec2020 色域 大于并包含 p3 色域。

下表以色彩空间的色度坐标列出这些色彩空间的原色， 如 [COLORIMETRY] 所定义。

注：上表不包含足以完整描述这些色彩空间的信息， 但足以判断某输出设备是否大致覆盖其各自色域。 参见 [SRGB] 以了解更多关于 sRGB 的信息，参见 [Display-P3] 以了解更多关于 Display P3 的信息， 以及参见 [ITU-R-BT-2020-2] 以了解更多关于 ITU-R Recommendation BT.2020 的信息。

@media (color-gamut: p3) { … }

注：若输出设备的完整输出色域足够大， 或某个色域是另一个受支持色域的子集， 则输出设备可以对该媒体特性的多个值返回 true。 因此， 最佳用法是以“递增”的方式使用该特性——当 (color-gamut: srgb) 为真时设置基准值， 然后当 (color-gamut: p3) 为真时覆盖它，等等。

注：某些输出设备， 例如单色显示器， 甚至无法支持 srgb 色域。 要测试这类设备， 可以在否定的布尔上下文方式中使用该特性：not (color-gamut)。

7. 交互媒体特性

“交互”媒体特性反映用户与页面交互方式的各个方面。

pointer 与 hover 特性与“主”指点设备的特征相关； 而 any-pointer 与 any-hover 可用于查询所有可能可用的指点设备的属性。

注：虽然本规范不定义用户代理应如何决定何为“主”指点设备， 但预期用户代理应通过综合以下因素来作出决定： 它们所运行的设备/环境方面的知识、 可用指点设备的数量与类型、 以及对这些设备中哪些通常和/或当前正在被使用的判断。 在某些情况下，设备的主输入机制不是指点设备， 但存在一个次要的——且较少使用的——指点设备输入， 用户代理可以决定将非指点设备视为主输入（从而使 pointer: none）。 用户代理也可以决定动态更改被认为是主输入的指点设备类型， 以响应用户环境的变化 或用户与 UA 交互方式的变化。

注：pointer、hover、 any-pointer 与 any-hover 特性仅与指点设备的特征 （或指点设备的完全缺失）相关， 不能用于检测诸如键盘等非指点设备输入机制的存在。 作者应考虑非指点设备输入存在的可能性， 无论查询这些特性时匹配到哪些值。

7.1. 指点设备质量：pointer 特性

pointer 媒体特性用于查询诸如鼠标之类的指点设备的存在与精确度。 如果存在多个指点设备， 则 pointer 媒体特性必须反映由用户代理决定的“主”指点设备的特征。 （要查询任何可用指点设备的能力， 请参见 any-pointer 媒体特性。）

none

设备的主输入机制不包含指点设备。

coarse

设备的主输入机制包含精确度受限的指点设备。 示例包括触摸屏与运动检测传感器（例如 Xbox 的 Kinect 外设）。

fine

设备的主输入机制包含精确的指点设备。 示例包括鼠标、触控板与绘图手写笔。

coarse 与 fine 都表示存在指点设备， 但在精确度方面不同。 在缩放因子为 1 时，若某指点设备难以或无法可靠地从若干相邻的小目标中选中其中一个， 则可归类为 coarse。 改变缩放级别不会影响该媒体特性的值。

注：由于 UA 可能向用户提供缩放能力， 或由于次要指点设备可能具备不同的精确度， 即便该媒体特性值为 coarse，用户仍可能进行精确点击。 该媒体特性并不表示用户永远无法精确点击， 仅表示这样做对用户而言不方便。 预期作者会对 coarse 值作出响应，设计不依赖精确点击即可操作的页面。

出于无障碍原因， 即便在指点设备可被描述为 fine 的设备上， UA 也可能对该媒体查询给出 coarse 或 none 的值， 以表示用户难以精确操控指点设备，或根本无法操控。 此外，即便主指点设备具备 fine 的指点精确度， 用户也可能拥有额外的 coarse 指点设备可用。 作者可能希望查询 any-pointer 媒体特性， 以将这些其他潜在的 coarse 指点设备考虑在内。

/* 如果主指点设备不够精确，就把单选按钮和复选框做大一些 */
@media (pointer: coarse) {
  input[type="checkbox"], input[type="radio"] {
    min-width: 30px;
    min-height: 40px;
    background: transparent;
  }
}

7.2. 悬停能力：hover 特性

hover 媒体特性用于查询用户能否通过主指点设备 在页面元素上悬停。 如果设备有多个指点设备， 则 hover 媒体特性必须反映由用户代理决定的“主”指点设备的特征。 （要查询任何可用指点设备的能力， 请参见 any-hover 媒体特性。）

none

表示主指点设备无法悬停， 或根本没有指点设备。 示例包括触摸屏以及使用基础绘图手写笔的屏幕。

能够悬停但悬停不方便且不是其常用交互方式的指点设备， 也匹配该值。 例如，将长按视作悬停的触摸屏 会匹配 hover: none。

hover

表示主指点设备可以轻松在页面局部上悬停。 示例包括鼠标以及类似 Nintendo Wii 控制器这类“物理指向屏幕”的设备。

出于无障碍原因，即便在确实支持悬停的设备上， UA 也可能对该媒体查询给出 hover: none 的值， 以选择那些在无悬停情况下也能良好运作的布局。 注意，即便主输入机制具备 hover: hover 能力， 用户也可能拥有额外的、不具备悬停能力的输入机制可用。

/* 仅在能够方便悬停的设备上使用悬停触发的下拉菜单。 */
@media (hover) {
  .menu > li        {display:inline-block;}
  .menu ul          {display:none; position:absolute;}
  .menu li:hover ul {display:block; list-style:none; padding:0;}
  /* ... */
}

7.3. 所有可用的交互能力：any-pointer 与 any-hover 特性

any-pointer 与 any-hover 媒体特性与 pointer 与 hover 媒体特性完全相同， 但它们对应于用户可用的所有指点设备能力的并集。 对于 any-pointer， 若不同指点设备具有不同特性，则可能有不止一个值匹配。

any-pointer 与 any-hover 只有在以下情况下才必须匹配 none： 所有指点设备对于相应查询都会匹配 none， 或根本没有任何指点设备。

附录 A：已弃用的媒体特性

以下 媒体特性 已被弃用。它们 为向后兼容而保留，但不适用于新编写的样式表。 作者不得使用它们。用户代理必须按规定支持它们。

要查询视口的尺寸（或分页媒体中的页面框）， 应使用 width、height 与 aspect-ratio 媒体特性， 而不是 device-width、device-height 与 device-aspect-ratio； 后者指设备的物理尺寸， 与文档布局可用空间大小无关。device-* 媒体特性 有时也被用作检测移动设备的代理。 相反，作者应使用能更好表示其试图针对的设备方面的 媒体特性。

device-width

device-width 媒体特性描述输出设备渲染表面的宽度。 对于 连续媒体， 这指 Web 暴露的屏幕区域 的宽度。 对于 分页媒体， 这指页面纸张尺寸的宽度。

device-width 在 负值范围内为假。

@media (device-width < 800px) { … }

注：若设备可在多种方向下使用， 例如竖屏与横屏， device-* 媒体特性反映当前方向。

device-height

device-height 媒体特性描述输出设备渲染表面的高度。 对于 连续媒体， 这指 Web 暴露的屏幕区域 的高度。 对于 分页媒体， 这指页面纸张尺寸的高度。

device-height 在 负值范围内为假。

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

device-aspect-ratio

device-aspect-ratio 媒体特性定义为 device-width 媒体特性的值 与 device-height 媒体特性的值之比。

@media (device-aspect-ratio: 16/9) { … }
@media (device-aspect-ratio: 32/18) { … }
@media (device-aspect-ratio: 1280/720) { … }
@media (device-aspect-ratio: 2560/1440) { … }

变更

自 2021 年 12 月 25 日候选推荐草案以来的变更

• 为 [Display-P3] 建立规范性引用

• 为与 级联层 兼容，禁止将 layer 用作媒体类型，而不只是将其视为未知类型。

自 2020 年 7 月 21 日候选推荐以来的变更

• 允许 <general-enclosed> 中出现空函数（参见 Issue 6803）。

• 对文法定义方式进行了编辑性调整 （参见 Issue 6806）。

自 2017 年 9 月 5 日候选推荐以来的变更

• 弃用 speech 媒体类型。 由于媒体类型是互斥的，它不可能与屏幕阅读器相关； 屏幕阅读器如其名称所示，是基于屏幕呈现工作的， 因而会匹配 screen 媒体类型。 它原本也可能针对纯音频 UA， 但目前未发现任何此类实现。
• 添加注释引用语法规范，以提醒 token 解析是 ASCII 不区分大小写的
• 修复文法中的一个 bug：它曾意外允许 (width 500px) 这类不带任何比较符的形式
• 将 <ratio> 的定义委托给 [CSS-VALUES-4]， 因为它现在用于的不仅仅是 mediaqueries。

  注：[CSS-VALUES-4] 已将其定义从 <ratio> = <integer> / <integer> 扩展为 <ratio> = <number [0,∞]> [ / <number [0,∞]> ]?

• 各种编辑性调整、措辞改进与澄清。
• 增加术语 continuous media 与 paged media 的定义。
• 由于缺少具有其所描述行为的现行 UA，移除了 overflow-block 的 optional-paged 值。
• 将 update 标记为 at risk。

自 2017 年 5 月 19 日工作草案以来的变更

• 将范围媒体特性改为 在负值范围内为假，而不是在解析时因负值而失败。
• 将 color-gamut 所需的色彩空间信息直接纳入规范中。
• 将 hover、pointer、any-hover 与 any-pointer 标记为不再 at-risk。

相对 Media Queries Level 3 的变更

自 2012 年 6 月 19 日的 Media Queries Level 3 推荐以来，本规范进行了以下变更：

• 对文档进行了大规模编辑性重写与重组。
• 布尔上下文 的 媒体特性 现在在其对关键字 none 会为真的情况下，也会额外为假。
• 具有数值的 媒体特性 现在可在 范围上下文 中书写。
• 增加了 pointer、any-pointer、hover、any-hover、update、color-gamut、overflow-block、 以及 overflow-inline 媒体特性。
• 禁止将 or、and、only 与 not 识别为媒体类型， 即便是无效的也不行。 （它们会触发语法错误。）
• 除 screen、print、speech 与 all 之外的所有媒体类型均被弃用。
• 弃用 device-width、device-height 与 device-aspect-ratio， 并出于隐私与安全原因，使它们引用 Web 暴露的屏幕区域 而不是屏幕本身。
• Mediaqueries 在某些情况下可能依赖于对样式表的求值

致谢

本规范是 W3C 级联样式表工作组的成果。

以下人员的评论改进了本规范： Amelia Bellamy-Royds， Andreas Lind， Andres Galante， Arve Bersvendsen， Björn Höhrmann， Chris Lilley， Chris Rebert， Christian Biesinger， Christoph Päper， Dean Jackson， Elika J. Etemad (fantasai)， Emilio Cobos Álvarez， François Remy， Frédéric Wang， Greg Whitworth， Ian Pouncey， James Craig， Jinfeng Ma， Kivi Shapiro， L. David Baron， Masataka Yakura， Melinda Grant， Michael[tm] Smith， Nicholas C. Zakas Patrick H. Lauke， Philipp Hoschka， Rick Byers， Rijk van Geijtenbeek， Roger Gimson， Sam Sneddon， Sigurd Lerstad， Simon Kissane， Simon Pieters， Steven Pemberton， Susan Lesch， Tantek Çelik， Thomas Wisniewski， Vi Nguyen， Xidorn Quan， Yves Lafon， 以及 張俊芝。

安全考虑

本规范未报告任何新的安全考虑事项。

隐私考虑

媒体查询使 CSS 能够查询页面环境的各个方面， 其中包括一些通过脚本很难或不可能发现的内容。 这可能带来隐私风险， 使对用户的指纹识别增强， 但总体风险较低。 至少，审视用户代理字符串也应能通过脚本推断出同样的信息。 然而，UA 字符串欺骗不会影响媒体查询， 使其成为一种在某种程度上更稳健的检测技术。

即便如此，媒体查询提供的信息相对粗粒度， 在这方面不会贡献太多熵。

少数遗留媒体特性（device-width、device-height、以及 device-aspect-ratio） 在没有明显收益的情况下暴露了 UA 运行环境的信息。 它们为兼容性原因而保留， 但出于隐私与安全考虑， UA 被允许报告不精确的信息。

TAG 制定了一份 自检问卷， 用于帮助编辑与工作组评估其规范引入的风险。 答案如下：

本规范是否处理可识别个人身份的信息？

否。

本规范是否处理高价值数据？

否。

本规范是否为某个来源引入跨浏览会话持久存在的新状态？

否。

本规范是否向 Web 暴露持久的跨来源状态？

否。

本规范是否向某个来源暴露其当前无法访问的其他数据？

否。

本规范是否启用新的脚本执行/加载机制？

否。

本规范是否允许某个来源访问用户的位置？

否。

本规范是否允许某个来源访问用户设备上的传感器？

否。

本规范是否允许某个来源访问用户本地计算环境的某些方面？

是，如本问卷上方文字所述。

本规范是否允许某个来源访问其他设备？

否。

本规范是否允许某个来源在一定程度上控制用户代理的原生 UI？

否。

本规范是否向 Web 暴露临时标识符？

否。

本规范是否区分第一方与第三方上下文下的行为？

否。

本规范在用户代理的“隐身”模式下应如何工作？

无需行为差异。

本规范是否将数据持久化到用户本地设备？

否。

本规范是否包含“安全考虑”和“隐私考虑”章节？

是，你正在阅读的就是该章节。

本规范是否允许降低默认安全特性？

否。