媒体查询 第 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. 组合媒体查询

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

一个 媒体查询列表 为 `true`，如果其组成的任何一个 媒体查询 为 `true`，而只有当其组成的所有 媒体查询 都为 `false` 时，媒体查询列表才为 `false`。

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

一个空的 媒体查询列表 总是为 `true`。

@media all { … }
@media { … }

2.2. 媒体查询修饰符

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

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

通过在前面加上 not 关键字，单个 媒体查询 的结果可以被取反。如果 媒体查询 通常会评估为 `true`，加上 not 后会使其评估为 `false`，反之亦然。

<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）的媒体查询，将自动被旧版用户代理视为 false。

注意： 在本规范发布时，这种旧版用户代理非常罕见，因此很少或几乎不需要使用 only 修饰符。

2.3. 媒体类型

媒体类型是用户代理设备的一个广泛类别，文档可以在这些设备上显示。最初的一组媒体类型是在 HTML4 中为 media 属性（如 <link> 元素）定义的。

不幸的是，媒体类型在区分具有不同样式需求的设备方面证明是不够的。自发明以来，一些最初非常独特的类别，如 screen 和 handheld，在过去的几年中已经显著融合。其他一些类别，如 tty 或 tv，暴露出有别于全功能计算机显示器的有用差异，因此可能需要针对这些类别进行不同的样式处理，但媒体类型被定义为互斥的，导致在合理的方式下使用它们变得困难。相反，它们的独特方面更适合通过媒体特性来表达，如 grid 或 scan。

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

all

匹配所有设备。

print

匹配打印设备，以及用于再现打印显示的设备，如“打印预览”中显示文档的浏览器。

screen

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

此外，以下已弃用的媒体类型被定义。作者不应使用这些媒体类型；相反，建议他们选择适当的媒体特性，以更好地表示他们试图样式化的设备特性。

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

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

注意：预计所有媒体类型最终都会被弃用，因为合适的媒体特性已被定义，能够捕捉到它们的重要差异。

2.4. 媒体特征

媒体特性比媒体类型更细化，用于测试用户代理或显示设备的单个特定特性。

在语法上，媒体特性类似于 CSS 属性：它们由特性名称、冒号和要测试的值组成。它们还可以以布尔形式仅写为特性名称，或者以范围形式使用比较运算符。

但是，属性和媒体特性之间有几个重要的区别：

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

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

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

2.4.1. 媒体特性类型：“范围”和“离散”

每个媒体特性在其定义表中将其“类型”定义为“范围”或“离散”。

“离散”媒体特性，例如 pointer 从一个集合中取值。值可以是关键字或布尔数（0 和 1），但共同点是它们之间没有固有的“顺序”——它们之间没有值“更小”或“更大”。

“范围”媒体特性，例如 width，另一方面，其值是取自一个范围。任何两个值都可以比较以确定哪个更小，哪个更大。

两种类型之间唯一显著的区别在于，“范围”媒体特性可以在范围上下文中进行评估，并接受在名称前加上“min-”和“max-”前缀。这样做会改变特性的含义——媒体特性与给定值完全匹配时为真，而不是在特性大于/小于/等于给定值时为真。

2.4.2. 在布尔上下文中评估媒体特征

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

当以这种方式编写时，媒体特性 在 布尔上下文 中进行评估。如果特性对于除了数字 0 之外的任何值都为真，或者是值为 0 的<dimension>，或者关键字 none，则该 媒体特征 评估为真。否则，它将评估为假。

2.4.3. 在范围上下文中评估媒体特征

具有“范围”类型的媒体特性可以在利用值的有序性、使用普通数学比较运算符的范围上下文中进行编写：

注意：这种语法是媒体查询第4级的新内容，因此目前还没有像 min-/max- 前缀那样被广泛支持。

基本形式包括一个特性名称、一个比较运算符和一个值，如果关系成立，则返回 true。

其余形式中，将特性名称嵌入到两个值的比较之间，如果两个比较都为真，则返回 true。

某些具有“范围”类型的媒体特性被称为 在负范围内为假。这意味着负值是有效的，必须解析，并且查询媒体特性是否等于、小于或小于等于任何这样的负值必须返回 false。查询媒体特性是否大于或大于等于负值，如果关系成立，则返回 true。

注意：如果负值在解析时被拒绝，它们将根据错误处理规则被视为 未知。然而，实际上，设备的 分辨率 是否为 -300dpi 并不是未知的，而是已知为假。同样，对于任何视觉设备，目标显示区域的 宽度 已知大于 -200px。上述规则反映了这一点，使直觉与用户代理的行为相符。

@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-" 前缀在范围特性上

与其在范围上下文中评估“范围”类型的媒体特性，如上所述，该特性可以写为普通的媒体特征，但在特性名称上加上 "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 的样式 */ }

“离散”类型属性不接受 "min-" 或 "max-" 前缀。将此类前缀添加到“离散”类型的媒体特性只会导致一个未知的特性名称。

在布尔上下文中尝试评估具有 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]，标记是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 关键字。

“<” 或 “>” <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> 项的取反。未知的取反结果为未知。

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

当 <media-in-parens> 子项及 <media-and> 子项的所有 <media-in-parens> 子项都为真时，结果为真；如果这些项中至少有一个为假，结果为假；否则为未知。

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

当 <media-in-parens> 子项及 <media-or> 子项的所有 <media-in-parens> 子项都为假时，结果为假；如果这些项中至少有一个为真，结果为真；否则为未知。

<general-enclosed>

结果为未知。

作者不得在样式表中使用 <general-enclosed>。它仅为了未来的兼容性而存在，以便在旧的用户代理中新的语法添加不会使太多 <media-condition> 无效。

<media-feature>

结果是评估指定媒体特征的结果。

如果上面任一产生式的结果在任何需要两个值布尔值的上下文中使用，则“未知”必须转换为“假”。

注意：这意味着，当 媒体查询 用于 @media 规则时，如果其解析为“未知”，则将其视为“假”并匹配失败。

3.2. 错误处理

在解析过程中，任何不符合前一节语法的媒体查询必须替换为 not all。

注意： 请注意，语法不匹配不会使整个 媒体查询列表失效，而只会影响有问题的 媒体查询。上面定义的解析行为会自动在下一个顶级逗号处恢复。

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

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

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

未知的 <mf-name> 或 <mf-value>，或不允许的 <mf-value>，会导致值为“未知”。其值为“未知”的 <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 在负范围内为 false。

<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 在负范围内为 false。

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 媒体特征在负范围内为false

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

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

对于没有物理分辨率限制的输出媒介（例如输出为矢量图形），此特征必须匹配 infinite 值。在 范围上下文 中评估此媒体特征时，infinite 必须被视为大于任何可能的 <resolution>。（也就是说，像 (resolution > 1000dpi) 这样的查询在 infinite 媒体中会为 true。）

@media (resolution >= 2dppx)

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

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

5.2. 显示类型：scan 特征

scan 媒体特征描述了一些输出设备的扫描过程。

interlace

CRT 和某些类型的等离子电视屏幕使用“交错”渲染，视频帧交替显示屏幕上的“偶数”行和“奇数”行，利用各种自动的视觉图像修正能力来产生平滑的运动。 这使它们能够在带宽成本减半的情况下模拟更高的帧率（FPS）广播。

在交错屏幕上显示时，作者应避免非常快的屏幕移动以避免“梳状”现象，并应确保屏幕上的细节宽度大于 1px 以避免“抖动”。

progressive

使用“逐行”渲染的屏幕会完全显示每一帧，无需特殊处理。

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

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

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

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

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

<mq-boolean> 值类型是一个 <integer>，值为 0 或 1。 任何其他整数值均无效。请注意，-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 排版引擎（现已停用）带有类似于 连续 的半分页呈现模式，除了它还尊重强制分页符。目前没有已知的用户代理具有这种行为，为避免误解描述这种用户代理，工作组决定不在本级别添加此类值。任何实现未被上述值充分描述的用户代理的人都被鼓励联系工作组，以便考虑对该媒体特征进行扩展。

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 描述了用户代理和输出设备支持的大致颜色范围。这意味着，如果用户代理接收到指定色域的内容，输出设备可以渲染适当的颜色，或接近的颜色。

注意：该查询使用近似范围是因为以下几个原因。首先，显示硬件之间存在很大差异。例如，设备可能声称支持 "Rec. 2020"，但实际上只能呈现显著低于完整色域的范围。其次，不同设备支持许多不同的色域，列举它们会非常繁琐。在大多数情况下，作者不需要知道显示器的确切能力，只需知道它是否比 sRGB 更好，或显著优于 sRGB。这样他们可以为用户提供适当的图像，标记颜色配置文件。

srgb

用户代理和输出设备可以支持大致的 sRGB 色域或更多。

注意：预计大多数彩色显示器都可以响应此类型查询并返回 true。

p3

用户代理和输出设备可以支持大致由 DCI P3 色彩空间指定的色域或更多。

注意： p3 色域比 srgb 色域更大并包含它。

rec2020

用户代理和输出设备可以支持大致由 ITU-R Recommendation BT.2020 色彩空间指定的色域或更多。

注意： rec2020 色域比 p3 色域更大并包含它。

下表列出了这些色域的主要颜色及其色度坐标，如 [COLORIMETRY] 所定义。

注意：上表并不包含完全描述色域的全部信息，但足以确定输出设备是否大致覆盖相应的色域。有关 sRGB 的更多信息，请参见 [SRGB]；有关 DCI P3 的更多信息，请参见 [SMPTE-EG-432-1-2010] 和 [SMPTE-RP-431-2-2011]；有关 ITU-R Recommendation BT.2020 的更多信息，请参见 [ITU-R-BT-2020-2]。

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

注意：如果输出设备的完整输出色域足够大，或某个色域是另一个支持色域的子集，则该媒体特性可以返回多个值。因此，最好按“升序”使用此特性——当 (color-gamut: srgb) 为 true 时设置基础值，然后如果 (color-gamut: p3) 为 true 时覆盖它，依此类推。

注意：某些输出设备，例如单色显示器，甚至无法支持 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。更改缩放级别不会影响此媒体特性的值。

注意： 由于用户代理可能允许用户进行缩放，或者由于次要指针设备可能具有不同的精度，即使此媒体特性的值为 coarse，用户仍然可能能够执行精确的点击。此媒体特性并不表示用户永远无法精确点击，只是表示对他们来说操作不便。预期作者在值为 coarse 时，通过设计不依赖于精确点击来操作的页面来响应此特性。

为了方便残障人士，即使设备的指针设备可以被描述为 fine，用户代理也可能向此媒体查询返回 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

表示主要指针设备可以轻松在页面上悬停。示例包括鼠标和物理上指向屏幕的设备（如任天堂 Wii 控制器）。

出于可访问性原因，即使在支持悬停的设备上，用户代理也可能将此媒体查询的值设为 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 在负范围内为 false。

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

注意：如果设备可以在多种方向上使用，例如纵向和横向，则 device-* 媒体特性反映当前方向。

设备高度

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

device-height 在负范围内为 false。

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

设备宽高比

媒体特性 '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) { … }

变更

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

• 允许在 中使用空函数（参见 问题 6803）。

• 对语法定义的编辑性微调（参见 Issue 6806）。

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

• 废弃 speech 媒体类型。 由于媒体类型是互斥的，这不可能与屏幕阅读器有关，因为顾名思义，屏幕阅读器基于屏幕渲染工作，因此匹配 screen 媒体类型。 它本可以与纯音频用户代理有关，但尚未发现有这种实现。
• 添加引用语法规范的注释，以提醒令牌解析是 ASCII 大小写不敏感的
• 修复了语法中的一个错误，该错误意外允许类似于 (width 500px) 的形式，没有任何比较符号
• 将 <ratio> 的定义委托给 [CSS-VALUES-4]，因为它现在不仅用于媒体查询。

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

• 各种编辑上的调整、措辞改进和澄清。
• 添加术语 连续媒体 和 分页媒体 的定义。
• 由于缺少当前具有所描述行为的用户代理，删除了 optional-paged 值 overflow-block。
• 将 update 标记为存在风险。

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

• 将范围媒体特性更改为在负值范围内为假，而不是解析负值失败。
• 直接在规范中包含关于 color-gamut 所需色域的足够信息。
• 将 hover、pointer、any-hover 和 any-pointer 标记为不再存在风险。

自媒体查询 Level 3 以来的变更

以下是自 2012 年 6 月 19 日媒体查询 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 暴露的屏幕区域 而不是屏幕，以确保隐私和安全。
• 在某些情况下，媒体查询可能依赖于样式表的评估。

致谢

本规范是 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， 和 張俊芝。

8. 隐私和安全注意事项

本规范未引入新的安全考虑。

媒体查询使 CSS 能够查询页面环境的各个方面， 包括通过脚本很难或不可能找到的内容。 这可能存在隐私风险， 可能增强对用户的指纹识别， 但风险通常较低。 至少，相同的信息应可通过检查用户代理字符串以推断出来。 然而，UA 字符串欺骗不会影响媒体查询， 因此这是一种更可靠的检测技术。

也就是说，媒体查询提供的信息相对粗略， 在这方面不会增加太多信息熵。

一些遗留的媒体特性（device-width、device-height 和 device-aspect-ratio） 会暴露关于 UA 运行环境的信息， 而这样做没有明确的好处。 出于兼容性原因，它们被保留， 但为了隐私和安全， UA 被允许报告不准确的信息。

TAG 开发了 自评问卷 以帮助编辑和工作组评估其规范引入的风险。 以下是提供的答案。

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

否。

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

否。

本规范是否引入了在浏览会话之间保持的原始状态？

否。

本规范是否向网页暴露了持久的跨域状态？

否。

本规范是否向原始资源暴露了当前无法访问的任何其他数据？

否。

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

否。

本规范是否允许原始资源访问用户的位置？

否。

本规范是否允许原始资源访问用户设备上的传感器？

否。

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

是，如本问卷之前的内容所述。

本规范是否允许原始资源访问其他设备？

否。

本规范是否允许原始资源对用户代理的本机 UI 进行某种程度的控制？

否。

本规范是否向网页暴露了临时标识符？

否。

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

否。

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

无需行为上的差异。

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

否。

本规范是否有“安全注意事项”和“隐私注意事项”部分？

是，这是您正在阅读的部分。

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

否。