媒体查询 第5级

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. 模块交互

本模块扩展并取代了 [MEDIAQUERIES-4] 及其前身 [MEDIAQUERIES-3]，它们本身是基于并替代了 CSS 2 § 7 媒体类型。

1.2. 值

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

1.3. 单位

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

相对长度 单位在媒体查询中是基于 初始值，这意味着单位不会基于声明的结果。

注意： 例如，在 HTML 中，em 单位是相对于 初始值 的 font-size，由用户代理或用户的偏好定义，而不是页面上的样式。请注意，这也会考虑用户可能应用的附加限制，例如最小字体大小。

1.4. Prefers-* 媒体特性安全与隐私

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]。该规范只定义了 媒体类型，但使用了前向兼容的语法，允许未来添加像 媒体特性 这样的概念。

不幸的是，这意味着旧版用户代理会忽略媒体查询中的任何 媒体特性，即使这些特性比 媒体类型 更重要。为隐藏这些查询，可以使用 only 关键字。

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

注意： only 关键字只能用于 媒体类型 之前。

注意： 在发布此规范时，使用旧版用户代理的情况非常罕见，因此使用 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 媒体特性 非零则为 true。
• 带有“范围”类型的 媒体特性 可以在范围上下文中书写，使用标准的数学比较运算符而不是冒号，或者可以在其特性名称前加上 “min-” 或 “max-” 前缀。
• 属性有时接受复杂的值，例如涉及几个其他值的计算。而 媒体特性 只接受单一值：一个关键字、一个数字等。

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

<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- 前缀得到广泛支持。

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

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

某些带有“范围”类型的媒体特性称为 负范围中的假。 这意味着负值是有效的且必须被解析，查询该媒体特性是否等于、 小于或小于等于任何负值必须为 false。 查询该媒体特性是否大于或大于等于负值在关系为真时返回 true。

注意: 如果负值在解析时被拒绝，它们将根据错误处理规则被视为 unknown。 然而，在实际情况中，无论设备的分辨率是否为 -300dpi，这不是未知，而是已知为 false。 类似地，对于任何可视设备，目标显示区域的 宽度 已知大于 -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) { /* 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-4]。

解析一个<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> ) ] | ( <ident> <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>*

结果为 true，如果<media-in-parens>子项 和所有 <media-in-parens> 子项 的 <media-and>子项均为 true， 如果至少一个 <media-in-parens> 条款为 false，则结果为 false， 否则为未知。

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

结果为 false，如果<media-in-parens> 子项和所有 <media-in-parens> 子项 的 <media-or> 子项均为 false， 如果至少一个 <media-in-parens> 条款为 true，则结果为 true， 否则为未知。

<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>， 或不允许的<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) { … }

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

overflow-block媒体特性描述了当内容在块轴中溢出时，设备的行为。

none

在块轴中没有溢出的处理机制； 任何溢出的内容都不会显示。 例如：广告牌

scroll

在块轴中溢出的内容可以通过允许用户滚动来查看。 例如：电脑屏幕

paged

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

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

注意： 将来可能会为此媒体特性添加额外的值，以描述具有混合行为的用户代理的类别，这些行为结合了 连续和 分页媒体的特性。 例如，Presto布局引擎（现已停产）具有一种类似于 连续的半分页呈现模式，除了它还支持强制分页符。 由于目前没有已知的用户代理具备这种行为，工作组决定在本级别中不添加此类值，以避免对任何此类用户代理的误分类。 任何未能通过上述指定值充分描述的用户代理的开发人员，均被鼓励联系工作组，以便考虑扩展此媒体特性。

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

overflow-inline媒体特性描述了当内容在行内轴中溢出时，设备的行为。

none

在行内轴中没有溢出的处理机制； 任何溢出的内容都不会显示。

scroll

在行内轴中溢出的内容可以通过允许用户滚动来查看。

注意： 目前没有已知的实现支持分页的行内轴溢出内容，且这一概念似乎也不太合理，因此 paged值在overflow-inline中没有定义。

4.7. 水平视口段：horizontal-viewport-segments 特性

horizontal-viewport-segments媒体特性描述了视口在水平方向上逻辑分段的数量。

horizontal-viewport-segments媒体特性在负范围内是 false。

当视口被一个或多个硬件特性（如折叠或铰链）分割时，这些分段可被页面视为逻辑上独立的区域。

4.8. 垂直视口段：vertical-viewport-segments 特性

vertical-viewport-segments媒体特性描述了视口在垂直方向上逻辑分段的数量。

vertical-viewport-segments媒体特性在负范围内是 false。

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) { … }

4.9. 显示模式：display-mode 媒体特性

display-mode 媒体特性表示网页应用的显示模式。 子浏览上下文反映其顶层浏览上下文的显示模式。

显示模式 代表网页应用在操作系统中的展示方式（例如全屏等）。显示模式对应于在给定平台上的用户界面（UI）隐喻和功能。显示模式的UI约定是建议性的，开发者可以根据需要自由解释。

该规范定义了以下显示模式：

fullscreen

网页应用以隐藏浏览器UI元素的方式显示，占据全部可用显示区域。

standalone

网页应用显示得像一个独立的本地应用程序。可以包括应用程序拥有独立窗口、在应用启动器中有自己的图标等。此模式下，用户代理排除标准浏览器UI元素（例如URL栏），但标准系统UI元素（如窗口装饰、系统状态栏、系统返回按钮）仍可用。

minimal-ui

该模式类似于standalone，但为终端用户提供了一些用于导航控制的UI元素（如后退、前进、重新加载等）。用户代理可能包括其他平台特定的UI元素，如"分享"和"打印"按钮。

browser

网页应用通过用户代理的特定平台惯例（如浏览器标签页或新窗口）打开超链接。

/* 应用于视口处于全屏状态时 */
@media (display-mode: fullscreen) {
  ...
}

/* 应用于某个元素全屏时 */
#game:fullscreen {
  ...
}

5. 显示质量媒体特性

5.1. 显示分辨率：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. 显示类型：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. 检测显示技术：environment-blending 特性

environment-blending 媒体特性用于查询用户显示设备的特性， 以便作者可以调整文档的样式。 作者可能会根据显示技术调整页面的视觉效果和/或布局，以增加吸引力或改善可读性。

以下值是有效的：

opaque

文档在不透明的介质上渲染，例如传统的显示器或纸张。 黑色是暗的，白色是 100% 亮的。

additive

显示器通过加法混合将画布的颜色与现实世界融合。 黑色是完全透明的，白色是 100% 亮的。

例如：汽车中的平视显示器。

subtractive

显示器通过减法混合将画布的颜色与现实世界融合。 白色是完全透明的，深色具有最大的对比度。

例如：嵌入浴室镜中的 LCD 显示屏。

是否需要 subtractive 值？

body { background-color: white; }
p { color: black; }

@media(environment-blending: additive) {
    body { background-color: black; }
    p { color: white; font-size: 16px; font-weight: 1000; }
}

6. 色彩媒体特性

6.1. 色深：color 特性

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

color 在负值范围内为false。

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

@media (color >= 8) { … }

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

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

注意： 所描述的功能只能在表面级别描述色彩能力。color-gamut 通常更符合作者的需求。 如果需要进一步的功能， RFC2879 [RFC2879] 提供了更具体的媒体特性，可能会在以后的阶段支持。

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

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

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

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

color-gamut 媒体特性描述用户代理（UA）和输出设备支持的近似色彩范围。 也就是说，如果 UA 接收到指定空间中的内容颜色，它可以使输出设备呈现适当的颜色或足够接近的颜色。

注意： 查询使用近似范围有几个原因。 首先，显示硬件存在很多差异。 例如，某设备可能声称支持“Rec. 2020”，但实际上呈现的色域远低于其完整范围。 其次，不同设备支持的色彩范围很多，枚举它们会很繁琐。 在大多数情况下，作者并不需要了解显示器的确切能力，只需知道它是否优于 sRGB 或显著优于 sRGB。 这样他们可以为用户提供适当的图像，并附加色彩配置文件。

srgb

UA 和输出设备可以支持近似 sRGB 色域或更大的色域。

注意： 预计绝大多数彩色显示器都能对这种查询返回 true。

p3

UA 和输出设备可以支持近似 DCI P3 色彩空间或更大的色域。

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

rec2020

UA 和输出设备可以支持近似 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) { … }

注意： 如果输出设备的全输出色域足够大，或者某色域是另一个支持色域的子集，则输出设备可以对该媒体特性的多个值返回 true。 因此，该特性最好以“递增”方式使用——在 (color-gamut: srgb) 为 true 时设置基值，然后在 (color-gamut: p3) 为 true 时进行覆盖，依此类推。

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

6.5. 动态范围：dynamic-range 特性

dynamic-range 代表用户代理（UA）和输出设备所支持的最大亮度、色深和对比度的组合。

high

用户代理和输出设备满足以下所有标准：

• 支持 高峰值亮度

• 支持 高对比度

• 色深大于 24 位或 RGB 每个颜色分量为 8 位

注意： 一些设备具备高动态范围能力，但并非总是启用，需要通过编程、用户操作或根据内容激活。 此媒体特性不测试此类模式是否处于活动状态，仅测试设备是否具备高动态范围视觉的能力。

standard

此值适用于任何可视设备，但不适用于缺乏视觉功能的设备。

注意： 此媒体特性可以同时匹配多个值： 匹配 high 的用户代理也将匹配 standard。

6.5.1. 确定显示器的对比度和亮度

峰值亮度是指发光设备（如LCD屏幕）能产生的最亮点，或者在光反射设备（如纸张或电子墨水）中，是指其最少吸收光的点。

注意： 有些设备只能在短时间内或其表面的某一小部分区域产生峰值亮度。

对比度是指系统能够产生的最亮颜色与最暗颜色的亮度比。

本规范未定义具体的测量方式；它也允许用户代理决定什么算是高 对比度 和高 峰值亮度。然而，用户代理必须尽量符合以下意图：具备高峰值亮度的设备可以显示“比白更亮”的高光，同时能展示深黑（而不是一个整体明亮但褪色的图像），这表明其具有高对比度。

注意： 对于dynamic-range和video-dynamic-range的判断会因用户代理而异，但预计具有广泛可依赖的语义。

6.6. 检测显示器上的颜色反转: inverted-colors 属性

inverted-colors 媒体特性指示内容是正常显示还是颜色已被反转。

注意： 这是指用户代理或底层操作系统强制反转了所有颜色，而不是请求执行此操作。这有时作为一种简单的辅助功能，允许用户在浅色背景和深色背景之间切换。然而，这会带来一些不良的副作用，例如反转图片或将阴影变为高光，从而降低内容的可读性。

none

颜色正常显示。

inverted

显示区域内的所有像素都已被反转。

当用户代理执行某种内容感知的反转时，该值不应匹配，如保留图像的反转（除非通过其UA样式表）。

注意： 该媒体特性的目的是让作者减轻非内容感知方式反转所有像素的副作用。如果作者在内容感知的情况下采取对策，他们的对策和用户代理的对策可能会相互抵消。

用户代理必须将以下规则添加到其 UA 样式表中：

@media (inverted-colors) { 
  img:not(picture>img), picture, video { filter: invert(100%); } 
}

@media (inverted-colors) {
  * {
    text-shadow: none !important;
    box-shadow: none !important;
  }
}

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

表示主要指点设备可以轻松地在页面上悬停。示例包括鼠标和物理指向屏幕的设备，如Nintendo 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。

7.4. 检测UA提供的导航控件：nav-controls 特性

nav-controls 媒体特性允许作者了解用户代理是否在其用户界面中提供显而易见的导航控件。

注意： 传统浏览器通常确实提供此类控件，网页通常无需对此进行关注，但在某些情况下，Web 应用程序通过所谓的 Web 视图运行，并不总是具有完整的用户界面。因此，作者需要了解用户代理提供了哪些功能，以便考虑是否需要提供一个显而易见的替代方案。

在此上下文中，显而易见 指的是控件是用户界面中直接可见的，诸如按钮，或者该设备用户界面典型的其他形式的控件，并且用户可以轻松识别。对于视觉用户界面，这通常是一个可见的控件，但在音频或触觉用户界面中可能是其他形式的控件。重要的是，这不是指键盘快捷键或手势；尽管它们可能非常方便，但它们并不通过简单地查看（在视觉UI情况下）用户代理即可显而易见。

以下取值是有效的：

none

用户代理没有任何显而易见的导航控件，尤其是没有任何导致用户代理在联合会话历史中返回上一页的控件。

back

用户代理提供导航控件，包括至少一个显而易见的控件，导致用户代理返回到联合会话历史中的上一页（通常是一个“返回”按钮）。

@media (nav-controls: back) {
  #back-button { 
    display: none; 
  } 
}

@media (nav-controls) { 
  #back-button {
    display: none; 
  } 
}

显而易见的控件是否处于活动状态并不影响此媒体特性的评估。

8. 视频前缀特性

某些用户代理（包括许多电视）以两个独立的“平面”（双平面）渲染视频和图形，这些平面具有不同的屏幕特性。提供了一组以视频为前缀的特性来描述视频平面。

任何双平面实现都必须根据视频平面为以下特性返回值：video-color-gamut；video-dynamic-range。所有其他特性必须基于图形平面返回值。

非双平面实现必须为视频前缀特性及其非前缀对应项返回相同的值。

8.1. 视频色彩显示质量：video-color-gamut 特性

video-color-gamut 媒体特性描述了用户代理和输出设备视频平面支持的近似色域范围。也就是说，如果用户代理接收到指定空间内的颜色内容，它可以让输出设备渲染适当的颜色，或者渲染与之足够接近的颜色。

取值和色彩空间定义与 color-gamut 相同。

8.2. 视频动态范围：video-dynamic-range 特性

video-dynamic-range 代表了用户代理和输出设备视频平面支持的最大亮度、色深和对比度的组合。

支持的取值与dynamic-range相同。

9. 脚本媒体特性

9.1. 脚本支持：scripting 特性

scripting 媒体特性用于查询当前文档是否支持脚本语言，例如JavaScript。

enabled

表示用户代理支持页面脚本，并且当前文档的脚本在文档的生命周期内启用。

initial-only

表示用户代理支持页面脚本，并且当前文档的脚本仅在页面初次加载时启用，但随后不再支持。例如打印页面或在服务器上渲染并向用户发送几乎静态页面的网络代理。

是否应该在用户代理声明initial-only之前设定明确的最低门槛？如果设定门槛太低，可能会导致作者依赖的脚本功能受到太多限制，但实际的用户代理可能会支持更多功能。

none

表示用户代理不会为此文档运行脚本；要么不支持脚本语言，要么在当前文档中未启用该支持。

某些用户代理能够根据每个脚本或每个域禁用脚本支持，从而允许在特定文档中运行部分脚本。这种情况下，scripting 媒体特性不能用于精细检测允许运行哪些脚本。

注: 未来版本的CSS可能会扩展此媒体特性，以便细粒度检测允许运行的脚本。

10. 自定义媒体查询

在设计使用媒体查询的文档时， 相同的媒体查询可能会在多个地方使用， 例如用于限定多个 @import 语句。 多次重复相同的媒体查询是一种编辑隐患； 作者在进行更改时必须对每一份副本进行相同的编辑， 否则会在 CSS 中出现难以发现的错误。

为了缓解这种情况， 本规范定义了一种定义 自定义媒体查询 的方法， 它们是为更长且更复杂的媒体查询提供的简单命名别名。 通过这种方式，可以将多个地方使用的媒体查询分配给一个 自定义媒体查询， 并且可以在任何地方使用， 而编辑媒体查询时只需修改一行代码。

自定义媒体查询 通过 @custom-media 规则定义：

@custom-media = @custom-media <extension-name> [ <media-query-list> | true | false ] ;

<extension-name> 可以用于 媒体功能 中。 它必须在 布尔上下文 中使用； 在普通或 范围上下文 中使用则是语法错误。 如果给出了 <media-query-list>， 自定义媒体查询 的计算结果为 true， 如果其代表的 <media-query-list> 计算结果为 true， 否则为 false。 如果给出 true 或 false， 则 自定义媒体查询 的结果分别为 true 或 false。

/* --modern 用于支持颜色或悬停的现代设备 */
@custom-media --modern (color), (hover);

@media (--modern) and (width > 1024px) {
  .a { color: green; }
}

@media ((color) or (hover)) and (width > 1024px) {
  .a { color: green; }
}

@media (color), (hover) and (width > 1024px) {
  .a { color: green; }
}

@custom-media 规则可以引用其他 自定义媒体查询。 但是，禁止出现循环引用， 且 自定义媒体查询 不得以自身或 另一个直接或间接引用它的 自定义媒体查询 为依据。 任何尝试定义具有循环依赖的 自定义媒体查询 的行为 都会导致循环中的所有 自定义媒体查询 定义失败。

如果多个 @custom-media 规则声明相同的 <extension-name>， 则真值仅基于最后一个声明， 忽略所有先前的相同 <extension-name> 的声明。

注意： 就错误处理而言， 未定义的 媒体功能 与 计算为 false 的 媒体功能 是不同的。 参见 媒体查询4 § 3.2 错误处理 了解详细信息。

@custom-media --narrow-window (max-width: 30em);

@media (--narrow-window) {
  /* 窄窗口样式 */
}
@media (--narrow-window) and (script) {
  /* 当允许脚本时的特殊样式 */
}
/* 等等 */

10.1. 基于脚本的自定义媒体查询

<script>
CSS.customMedia.set('--foo', 5);
</script>
<style>
@media (_foo: 5) { ... }
@media (_foo < 10) { ... }
</style>

11. 用户偏好媒体功能

11.1. 检测用户对页面减少运动的需求：prefers-reduced-motion 功能

prefers-reduced-motion 媒体功能用于 检测用户是否请求系统最小化动画或运动的数量。

no-preference

表示用户未向系统表明任何偏好。 在布尔上下文中，该关键字值的计算结果为 false。

reduce

表示用户已通知系统他们更喜欢最小化运动或动画的界面， 最好将所有非必要的运动移除。

11.2. 检测用户减少页面透明度的需求：prefers-reduced-transparency 功能

prefers-reduced-transparency 媒体功能 用于检测用户是否请求系统最小化透明或半透明层效果的使用。

no-preference

表示用户未向系统表明任何偏好。 在布尔上下文中，该关键字值的计算结果为 false。

reduce

表示用户已通知系统他们更喜欢最小化透明或半透明层效果的界面。

这如何与例如图案填充和背景的偏好相互作用？ 它们不涉及透明度，但也会干扰形状识别。

11.3. 检测用户对页面元素增加或减少颜色对比度的需求：prefers-contrast 功能

prefers-contrast 媒体功能用于检测用户是否请求页面的颜色对比度增加或减少。 例如，可以通过调整相邻颜色的对比度， 或者改变元素的视觉突出程度（如调整边框）来响应这一需求。

no-preference

表示用户未向系统表明任何偏好。 在布尔上下文中，该关键字值的计算结果为 false。

less

表示用户已通知系统他们更喜欢较低对比度的界面。

more

表示用户已通知系统他们更喜欢较高对比度的界面。

custom

表示用户希望使用特定的颜色组合， 但这些颜色的对比度既不符合 more 也不符合 less。

注意： 此值适用于使用强制颜色模式的用户， 他们选择的调色板既不是特别高对比度，也不是特别低对比度。 参见 § 11.4 检测强制颜色模式：forced-colors 功能。

一位用户要求使用 锈红色背景下的青色文本， 至少从亮度角度来说，并没有表达对特别高或低对比度的需求，但这也不是没有偏好。

11.4. 检测强制颜色模式：forced-colors 功能

active

表示强制颜色模式处于活动状态：用户代理在页面上强制使用用户选择的有限调色板， 用户代理会通过 CSS 系统颜色关键字向作者提供调色板。 详情请参阅CSS 颜色调整 § 3 强制调色板。

这并不一定表示用户偏好更高对比度。 颜色已被强制调整以匹配用户的偏好， 但这种偏好可以是更少或更多的对比度， 或者是既不是特别低也不是特别高对比度的其他安排。

除了forced-colors: active 之外， 如果用户选择的强制调色板具有特别高或低的对比度， 用户代理还必须匹配 prefers-contrast: more 或 prefers-contrast: less， 否则必须匹配 prefers-contrast: custom。

同样地， 如果用户选择的强制调色板符合prefers-color-scheme 描述的颜色方案之一， 也必须匹配相应的值。

none

表示强制颜色模式未激活。

11.5. 检测用户对亮色或暗色配色方案的偏好：prefers-color-scheme 功能

prefers-color-scheme 媒体功能反映了用户希望页面使用亮色或暗色主题的偏好。

light

表示用户偏好亮色主题（浅色背景上的深色文本）， 或者没有明确表达偏好 （因此应该使用默认的"网页亮色主题"）。

dark

表示用户偏好暗色主题（深色背景上的浅色文本）。

注意： 此功能的值可能会在未来扩展 （以表达对亮色主题的更强偏好， 或对其他类型的配色方案如"棕褐色"的偏好）。 因此，最具前瞻性的使用此媒体功能的方式是通过否定条件，例如 (prefers-color-scheme: dark) 和 (not (prefers-color-scheme: dark))， 以确保新值至少会落入某个样式块中。

用户表达其偏好的方式可能有所不同。 它可能是由操作系统提供的系统设置， 或由用户代理控制的设置。

注意： 用户偏好也可能因媒介而异。 例如，用户可能更喜欢在发光屏幕上使用暗色主题， 但在打印时更喜欢亮色主题 （以节省墨水 和/或因为在白纸上印刷的文本比在墨水背景上镂空的文本效果更好）。 用户代理应考虑到这种差异， 以确保prefers-color-scheme 反映与媒介相适应的偏好， 而不是与上下文无关的偏好。

11.6. 检测用户在加载页面时减少数据使用的需求：prefers-reduced-data 功能

此功能可能会成为不必要的指纹识别来源， 带有偏向于低收入和有限数据的倾向。 应为此规范添加隐私和安全部分， 并且应解决这一问题。[问题 #4832]

prefers-reduced-data 媒体功能用于检测用户是否希望提供使用较少数据的替代内容以呈现页面。

no-preference

表示用户未向系统表明任何偏好。 在布尔上下文中，该关键字值的计算结果为 false。

reduce

表示用户已表达了对轻量化替代内容的偏好。

用户表达其偏好的方式可能有所不同。 它可能是由操作系统提供的系统设置， 或由用户代理控制的设置。

注意： 用户代理可以考虑基于相同的用户或系统偏好设置此功能， 就像他们使用 Save-Data HTTP 请求头一样。

.image {
  background-image: url("images/heavy.jpg");
}

@media (prefers-reduced-data: reduce) {
  /* Save-Data: On */
  .image {
    background-image: url("images/light.jpg");
  }
}

11.7. 用户偏好的自动处理

用户代理可能有明确的设置，允许用户指明其偏好， 或者可以基于底层操作系统的设置作出判断。 用户代理还可以根据设备、环境等信息自动推断用户的偏好。 在这种情况下，建议用户代理也提供一种方式，让用户选择退出或覆盖自动确定的偏好。

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

附录 B：隐私和安全注意事项

本节不具备规范性。

变更

本节不具备规范性。

致谢

本节不具备规范性。

本规范是由 W3C 层叠样式表工作组开发的产品。

感谢以下人员的评论和贡献： Adam Argyle, Amelia Bellamy-Royds, Andreas Lind, Andres Galante, Arve Bersvendsen, Björn Höhrmann, Chen Hui Jing, Chris Lilley, Chris Rebert, Christian Biesinger, Christoph Päper, Elika J. Etemad (fantasai), Emilio Cobos Álvarez, François Remy, Frédéric Wang, Fuqiao Xue, Greg Whitworth, Ian Pouncey, James Craig, Jay Harris, Jinfeng Ma, Kivi Shapiro, L. David Baron, Masataka Yakura, Matt Giuca, Melinda Grant, Michael Smith, Nicholas C. Zakas Patrick H. Lauke, Philipp Hoschka, Rick Byers, Rijk van Geijtenbeek, Rik Cabanier, Roger Gimson, Rossen Atanassov, Sam Sneddon, Sigurd Lerstad, Simon Kissane, Simon Pieters, Steven Pemberton, Susan Lesch, Tantek Çelik, Thomas Wisniewski, Vi Nguyen, Xidorn Quan, Yves Lafon, akklesed, and 張俊芝 对本规范的改进做出了贡献。