媒体查询级别 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. 媒体类型

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

不幸的是，事实证明媒体类型不足以作为区分具有不同样式需求的设备的方式。一些最初截然不同的类别，如 screen 和 handheld，在发明后的几年中已经显著融合。其他如 tty 或 tv，暴露出与全功能计算机显示器标准的不同之处，因此可能通过不同的样式来定位，但媒体类型作为互斥的定义使得以合理的方式使用它们变得困难；相反，它们的排他性方面最好表达为媒体特性，例如 grid 或 scan。

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

all

匹配所有设备。

print

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

screen

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

此外，定义了以下已弃用的媒体类型。作者不得使用这些媒体类型；相反，建议选择适当的媒体特性，它们能更好地代表试图设置样式的设备方面。

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

• tty
• tv
• projection
• handheld
• braille
• embossed
• 听觉（aural）
• speech

注意：预期所有的媒体类型最终也将被弃用，因为定义了适当的媒体特性来捕捉它们的重要差异。

2.4. 媒体特性

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

在语法上，媒体特性类似于 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. 媒体特性类型：“范围型”和“离散型”

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

“离散型”媒体特性，如 pointer，其值取自集合。这些值可以是关键字或布尔数字（0 和 1），但共同点是它们没有内在的“顺序”——没有任何值比其他值“小”或“大”。

另一方面，“范围型”媒体特性如 width，其值取自一个范围。任何两个值都可以进行比较，以查看哪一个较小，哪一个较大。

两种类型之间唯一的显著区别在于，“范围型”媒体特性可以在范围上下文中进行评估，并接受在其名称上加上“min-”和“max-”前缀。执行其中任何一项操作都会改变特性的含义——该媒体特性不再是在特性精确匹配给定值时为真，而是在特性大于/小于/等于给定值时匹配。

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

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

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

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

具有“范围”类型的媒体特性可以交替地写在范围上下文中，利用其值是有序的这一事实，使用普通的数学比较运算符

注意：此语法是 Mediaqueries 第 4 版中的新增内容，因此目前不像 min-/max- 前缀那样得到广泛支持。

基本形式由特性名称、比较运算符和值组成，如果关系为真，则返回真。

其余形式，将特性名称嵌套在两个值比较之间，如果两个比较都为真，则返回真。

一些具有“范围”类型的媒体特性被称为在负值范围内为假。这意味着负值是有效的并且必须被解析，并且查询该媒体特性是否等于、小于或小于等于任何此类负值必须评估为假。查询该媒体特性是否大于或大于等于负值，如果关系为真，则评估为真。

注意：如果负值在解析时被拒绝，它们将根据错误处理规则被视为 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-”前缀

特性可以写成普通的媒体特性，但特性名称前带有“min-”或“max-”前缀，而不是如上所述在范围上下文中评估“范围”类型的媒体特性。

这等同于在范围上下文中评估特性，如下所示

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

注意：因为“min-”和“max-”都等同于包含该值的范围比较，它们在某些情况下可能会产生限制。

@media (max-width: 320px) { /* styles for viewports <= 320px */ }
@media (min-width: 321px) { /* styles for viewports >= 321px */ }

@media (max-width: 320px) { /* styles for viewports <= 320px */ }
@media (min-width: 320.01px) { /* styles for viewports >= 320.01px */ }

@media (width <= 320px) { /* styles for viewports <= 320px */ }
@media (width > 320px) { /* styles for viewports > 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 和 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> 项的否定。未知的否定是未知的。

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

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

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

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

<general-enclosed>

结果是未知的。

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

<media-feature>

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

如果上述任何生产的结果用于需要双值布尔值的上下文中，“未知”必须转换为“假”。

注意：这意味着，例如，当媒体查询用于 @media 规则时，如果它解析为“未知”，它会被视为“假”且不匹配。

3.2. 错误处理

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

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

@media (example, all,), speech { /* only applicable to speech devices */ }
@media &test, speech           { /* only applicable to speech devices */ }

@media (example, speech { /* rules for speech devices */ }

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

未知的 <mf-name> 或 <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 特性

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 特性

height 媒体特性描述了输出设备目标显示区域的高度。对于连续媒体，这是视口的高度，包括渲染出的滚动条大小（如果有）。对于分页媒体，这是页面盒模型的高度。

<length> 根据 § 1.3 单位 进行解释。

height 在负值范围内为假 (false)。

4.3. Aspect-Ratio: aspect-ratio 特性

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

4.4. Orientation: orientation 特性

portrait

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

landscape

否则，orientation 为 landscape（横向）。

@media (orientation: portrait) { … }

5. 显示质量媒体特性

5.1. Display Resolution: resolution 特性

resolution 媒体特性描述输出设备的解析度，即像素密度，需考虑页面缩放，但假设比例因子为 1.0。

resolution 媒体特性在负值范围内为假 (false)。

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

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

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

@media (resolution >= 2dppx)

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

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

5.2. Display Type: scan 特性

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

interlace

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

在隔行扫描屏幕上显示时，作者应避免屏幕上的极快移动以防止“梳状效应”，并应确保屏幕上的细节宽度大于 1px 以避免 “闪烁” (twitter)。

progressive

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

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

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

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

5.3. Detecting Console Displays: grid 特性

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

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

<mq-boolean> 值类型是一个具有 0 或 1 值的 <integer>。任何其他整数值均无效。注意，在 CSS 中 -0 始终等同于 0，因此也可以作为有效的 <mq-boolean> 值被接受。

注意：<mq-boolean> 类型仅存在于遗留目的。如果今天设计此特性，它将改用适当的命名关键字作为其值。

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

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

5.4. Display Update Frequency: update 特性

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

none（无）

一旦呈现，布局就无法再更新。示例：打印在纸上的文档。

slow

布局可能会根据 CSS 的常规规则动态更改，但输出设备无法以足够快的速度渲染或显示更改，使其被感知为平滑动画。示例：电子墨水屏或电力严重不足的设备。

fast

布局可能会根据 CSS 的常规规则动态更改，且输出设备在速度上没有特别受限，因此可以使用 CSS 动画等定期更新的内容。示例：电脑屏幕。

@media (update) {
  a { text-decoration: none; }
  a:hover, a:focus { text-decoration: underline; }
}
/* In non-updating UAs, the links get their default underline at all times. */

5.5. Block-Axis Overflow: overflow-block 特性

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

none（无）

在块轴上没有溢出的余地；任何溢出的内容直接不显示。示例：广告牌。

scroll

块轴上的溢出内容通过允许用户滚动来显示。示例：电脑屏幕。

分页的

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

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

注意：未来可能会为此媒体特性添加其他值，以描述具有混合行为的各类用户代理，结合了连续和分页媒体的方面。例如，Presto 布局引擎（现已停用）发布了一种半分页演示模式行为，类似于 continuous，但它尊重强制分页符。由于不知道目前有任何具有这种行为的正在发行的用户代理，工作组决定在本级别不添加此类值，以免错误描述任何此类用户代理。任何实现了上述值均无法充分描述的用户代理的作者，鼓励联系工作组，以便考虑对此媒体特性的扩展。

5.6. Inline-Axis Overflow: overflow-inline 特性

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

none（无）

在行内轴上没有溢出的余地；任何溢出的内容直接不显示。

scroll

行内轴上的溢出内容通过允许用户滚动来显示。

注意：目前没有已知的关于行内溢出内容的“分页”溢出实现，且该概念本身似乎意义不大，因此有意不为 overflow-inline 提供 paged 值。

6. 颜色媒体特性

6.1. Color Depth: color 特性

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

color 在负值范围内为假 (false)。

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

@media (color >= 8) { … }

如果不同的颜色组件由不同数量的位表示，则使用最小的数字。

在具有索引颜色的设备中，使用查找表中每个颜色组件的最小位数。

注意：上述功能仅能在表面层面上描述颜色能力。color-gamut 通常与作者的需求更相关。如果需要进一步的功能，RFC2879 [RFC2879] 提供了可能在以后阶段支持的更具体的媒体特性。

6.2. Paletted Color Screens: color-index 特性

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

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

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

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

6.3. Monochrome Screens: monochrome 特性

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

monochrome 在负值范围内为假 (false)。

@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 Display Quality: color-gamut 特性

color-gamut 媒体特性描述了 UA 和输出设备支持的大致颜色范围。也就是说，如果 UA 接收到指定空间内颜色的内容，它可以使输出设备渲染出适当的颜色，或某种足够接近的颜色。

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

srgb

UA 和输出设备可以支持大致 sRGB 色域或更大范围。

注意：预期绝大多数彩色显示器都能够对此类查询返回真值。

p3

UA 和输出设备可以支持大致 Display P3 [Display-P3] 色彩空间指定的色域或更大范围。

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

rec2020

UA 和输出设备可以支持大致 ITU-R 建议书 BT.2020 色彩空间指定的色域或更大范围。

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

下表列出了这些色彩空间的基色及其色彩空间色度坐标，定义于 [COLORIMETRY]。

注意：上表包含的信息不足以完整描述这些色彩空间，但足以确定输出设备是否大致涵盖了其各自的色域。有关 sRGB 的更多信息，请参阅 [SRGB]；有关 Display P3 的更多信息，请参阅 [Display-P3]；有关 ITU-R 建议书 BT.2020 的更多信息，请参阅 [ITU-R-BT-2020-2]。

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

注意：如果输出设备的全部输出色域足够大，或者一个色域是另一个支持色域的子集，则输出设备可以对多个此媒体特性的值返回真值。因此，此特性最好以“升序”方式使用——当 (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. Pointing Device Quality: 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 潜在指针设备纳入考量。

/* Make radio buttons and check boxes larger if we have an inaccurate primary pointing device */
@media (pointer: coarse) {
  input[type="checkbox"], input[type="radio"] {
    min-width: 30px;
    min-height: 40px;
    background: transparent;
  }
}

7.2. Hover Capability: hover 特性

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

none（无）

表示主要指针设备无法悬停，或者根本没有指针设备。示例包括触摸屏和使用基本绘图触控笔的屏幕。

可以悬停但悬停非常不便且非正常使用方式的指针设备也匹配此值。例如，将长按视为悬停的触摸屏将匹配 hover: none。

hover（悬停）

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

出于可访问性原因，即使在支持悬停的设备上，UA 也可能为此媒体查询给出 hover: none 的值，以选择那些无需悬停即可良好工作的布局。注意，即使主要输入机制具有 hover: hover 能力，用户可能还有其他不提供悬停能力的输入机制可用。

/* Only use a hover-activated drop down menu on devices that can conveniently 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

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

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

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

变更 (Changes)

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

• 为 [Display-P3] 建立规范性参考

• 禁止使用 layer 作为媒体类型，而不是仅仅将其视为未知类型，以与 层叠层 (cascade layers) 兼容。

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

• 允许在 <general-enclosed> 中使用空函数（见 Issue 6803）。

• 对语法定义方式的编辑性调整（见 Issue 6806）。

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

• 弃用 speech 媒体类型。由于媒体类型是互斥的，它不能涉及屏幕阅读器，屏幕阅读器正如其名，基于屏幕渲染工作，因此匹配 screen 媒体类型。它本可以关于纯音频 UA，但没有已知的此类实现。
• 添加引用语法规范的注释，提醒标记解析不区分 ASCII 大小写
• 修复了语法中的一个错误，该错误意外地允许了诸如 (width 500px) 之类没有比较的形式
• 将 <ratio> 的定义委托给 [CSS-VALUES-4]，因为它现在的使用范围已不止于媒体查询。

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

• 各种编辑性调整、措辞改进和澄清。
• 添加术语 连续媒体 和 分页媒体 的定义。
• 由于缺乏具备其描述行为的当前 UA，放弃了 overflow-block 的 optional-paged 值。
• 标记 update 为风险项。

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

• 将范围媒体特性更改为在负值范围内为假 (false)，而不是解析负值失败。
• 将 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, 和 張俊芝 的评论改进了本规范。

安全考量

本规范未报告任何新的安全考量。

隐私考量

媒体查询使 CSS 能够查询页面环境的各个方面，包括通过脚本难以或不可能发现的事物。这潜在是一种隐私风险，允许增强用户的指纹识别，但风险通常较低。至少，相同的信息应该可以通过检查用户代理字符串推断出来。然而，UA 字符串欺骗不影响媒体查询，使其成为一种稍微更稳健的检测技术。

话虽如此，媒体查询授予的信息相对粗略，并不显著增加这方面的熵。

少数遗留媒体特性（device-width, device-height, 和 device-aspect-ratio）暴露了 UA 运行环境的信息，且没有任何明确的利益。为了兼容性原因保留了它们，但为了隐私和安全，允许 UA 报告不准确的信息。

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

本规范是否处理个人身份信息？

不。

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

不。

本规范是否为跨浏览会话持久化的源引入了新状态？

不。

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

不。

本规范是否向一个源暴露了它目前无法访问的其他数据？

不。

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

不。

本规范是否允许源访问用户位置？

不。

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

不。

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

是，如本问卷之前的正文所述。

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

不。

本规范是否允许源对用户代理的原生 UI 有一定程度的控制？

不。

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

不。

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

不。

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

不需要行为上的差异。

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

不。

本规范是否有“安全考虑”和“隐私考虑”部分？

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

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

不。