媒体查询级别 3

W3C 推荐标准, 2024年5月21日

关于此文档的更多详细信息

此版本:: https://www.w3.org/TR/2024/REC-mediaqueries-3-20240521/
最新版本:: https://www.w3.org/TR/mediaqueries-3/
最新编辑版本:: https://drafts.csswg.org/mediaqueries-3/
上一个版本:: https://www.w3.org/TR/2022/REC-mediaqueries-3-20220405/
历史:: https://www.w3.org/standards/history/mediaqueries-3/
评论的处理:: https://drafts.csswg.org/mediaqueries-3/issues-2012-and-later
实施报告:: https://drafts.csswg.org/mediaqueries-3/impl-report
编辑:: Florian Rivoal (特邀专家)
之前的编辑:: Håkon Wium Lie <howcome @opera.com>; Tantek Çelik <tantek @cs.stanford.edu>; Daniel Glazman <daniel.glazman @disruptive-innovations.com>; Anne van Kesteren <annevk@opera.com>
反馈:: GitHub 问题是讨论此规范的首选方式。在提交问题时，请在标题中加入文本“mediaqueries-3”，最好像这样: “[mediaqueries-3] …评论摘要…”。所有问题和评论都已被存档，此外还有一个历史归档。
勘误表:: http://www.w3.org/Style/2022/REC-mediaqueries-3-20220405-errata.html

摘要

HTML 和 CSS 当前支持为不同媒体类型定制的依赖于媒体的样式表。例如，当在屏幕上显示时，文档可能使用无衬线字体，而在打印时则使用衬线字体。‘screen’ 和 ‘print’ 是已经定义的两种媒体类型。媒体查询通过允许对样式表进行更精确的标记，扩展了媒体类型的功能。

媒体查询由媒体类型和零个或多个用于检查特定媒体特性条件的表达式组成。在媒体查询中可以使用的媒体特性包括 ‘width’、‘height’ 和 ‘color’。通过使用媒体查询，可以在不更改内容本身的情况下，根据特定的输出设备范围定制展示效果。

本文档的状态

本节描述了本文档在发布时的状态。当前 W3C 发布的文档列表和本技术报告的最新修订版本可在 W3C 技术报告索引中找到，网址为 https://www.w3.org/TR/。

本文档由 CSS 工作组作为推荐标准发布，使用了推荐轨道。本文档包括提议的修正。

W3C 推荐标准是一种规范，在经过广泛的共识构建后，得到了 W3C 及其成员的认可，并且工作组成员承诺为实现这一规范提供免版税许可。

W3C 推荐广泛部署此规范作为 Web 标准。

请通过在 GitHub 中提交问题（首选方式）提供反馈，在标题中包含规范代码“mediaqueries-3”，例如：“[mediaqueries-3] …评论摘要…”。所有问题和评论都已被存档。或者，反馈可以发送到存档的公共邮件列表 www-style@w3.org。评论截止日期为 2024 年 7 月 21 日。

未来对本推荐标准的更新可能会纳入新功能。

本文档受 2023 年 11 月 3 日 W3C 流程文档管辖。

本文档由根据 W3C 专利政策运作的工作组生成。W3C 维护了一个公开的专利披露列表，该列表包含与工作组交付成果相关的任何专利披露；该页面还包括披露专利的说明。了解有专利且相信包含必要性声明的个人必须根据 W3C 专利政策第6节进行披露。

提议的修正已在本文档中标注。

1. 背景

（本节为非规范性内容。）

HTML4 [HTML401] 和 CSS2 [CSS21] 目前支持针对不同媒体类型的媒体相关样式表。例如，一个文档可以在屏幕上使用无衬线字体，在打印时使用衬线字体。在 HTML4 中，这可以写成：

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

在 CSS 样式表中，可以声明某些部分适用于特定的媒体类型：

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

‘print’ 和 ‘screen’ 媒体类型在 HTML4 中已定义。HTML4 中的媒体类型列表为：‘aural’，‘braille’，‘handheld’，‘print’，‘projection’，‘screen’，‘tty’，‘tv’。CSS2 定义了相同的列表，弃用了 ‘aural’ 并增加了 ‘embossed’ 和 ‘speech’。此外，‘all’ 用于指示样式表适用于所有媒体类型。

多个用户代理支持媒体特定的样式表。最常用的功能是区分 ‘screen’ 和 ‘print’。

已有请求希望能更详细地描述样式表适用于哪种类型的输出设备。幸运的是，HTML4 预见了这些请求，并为媒体类型定义了一个向前兼容的语法。以下是 HTML4 中的引文 HTML4，章节 6.13：

未来版本的 HTML 可能会引入新值，并允许参数化值。为了便于引入这些扩展，符合规范的用户代理必须能够解析 media 属性值，解析方法如下：
该值是一个逗号分隔的条目列表。例如：
media="screen, 3d-glasses, print and resolution > 90dpi"
映射为：
"screen"
"3d-glasses"
"print and resolution > 90dpi"
每个条目在遇到第一个不是 US ASCII 字母 [a-zA-Z]（Unicode 十进制 65-90，97-122）、数字 [0-9]（Unicode 十六进制 30-39）或连字符（45）字符时截断。在该示例中，得到：
"screen"
"3d-glasses"
"print"

本规范中描述的媒体查询基于 HTML4 中概述的机制。媒体查询的语法适用于 HTML4 中保留的媒体类型语法。HTML4 的 media 属性在 XHTML 和通用 XML 中也存在。相同的语法也可以在 CSS 的 ‘@media’ 和 ‘@import’ 规则中使用。

然而，媒体查询的解析规则与 HTML4 的解析规则不兼容，以便与 CSS 中使用的媒体查询保持一致。

较新的 HTML 版本 [HTML] 直接参考了媒体查询规范，从而更新了 HTML 的规则。

2. 媒体查询

媒体查询由一个媒体类型和零个或多个表达式组成，这些表达式检查特定媒体特性的条件。

本节中的媒体查询声明假设遵循了语法部分。不符合语法的媒体查询在错误处理部分中讨论。即语法优先于本节中的要求。

以下是一个用 HTML 编写的简单示例：

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

这个例子表示一个特定的样式表 (example.css) 适用于某种媒体类型 (‘screen’) 和某种特性（必须是彩色屏幕）。

以下是在 CSS 中使用 @import 规则编写的相同媒体查询：

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

媒体查询是一个逻辑表达式，它要么为真要么为假。如果媒体查询的媒体类型与用户代理运行的设备的媒体类型匹配（如“适用于”行中定义），并且媒体查询中的所有表达式都为真，那么媒体查询为真。

对于适用于所有媒体类型的媒体查询，提供了一种简写语法；可以省略关键字 ‘all’（以及尾随的 ‘and’）。即，如果未明确给出媒体类型，则默认是 ‘all’。

即这些是相同的：

@media all and (min-width:500px) { … }
@media (min-width:500px) { … }

这些也是相同的：

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

可以在媒体查询列表中组合多个媒体查询。媒体查询的逗号分隔列表。如果列表中的一个或多个媒体查询为真，则整个列表为真，否则为假。在媒体查询语法中，逗号表示逻辑 OR，而 ‘and’ 关键字表示逻辑 AND。

以下是在 CSS 中使用 @media 规则的逗号分隔列表中多个媒体查询的示例：

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

如果媒体查询列表为空（即声明为空字符串或仅由空白组成），则它的计算结果为真。

即这些是等价的：

@media all { … }
@media { … }

逻辑 NOT 可以通过 ‘not’ 关键字表示。在媒体查询开头出现 ‘not’ 关键字会否定结果。即，如果媒体查询在没有 ‘not’ 关键字的情况下为真，它将变为假，反之亦然。仅支持媒体类型的用户代理（如 HTML4 中描述的）将无法识别 ‘not’ 关键字，因此不会应用相关的样式表。

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

关键字 ‘only’ 也可以用于将样式表隐藏在旧版用户代理中。用户代理必须像忽略 ‘only’ 关键字一样处理以 ‘only’ 开头的媒体查询。

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

媒体查询语法可用于 HTML、XHTML、XML [XMLSTYLE] 和 CSS 的 @import 和 @media 规则。

以下是在 HTML、XHTML、XML、@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) { … }

[XMLSTYLE] 规范尚未更新以在 media 伪属性中使用媒体查询。

如果媒体特性不适用于用户代理运行的设备，则涉及该媒体特性的表达式将为假。

媒体特性 ‘device-aspect-ratio’ 仅适用于视觉设备。在听觉设备上，涉及 ‘device-aspect-ratio’ 的表达式因此始终为假：

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

如果度量单位不适用于设备，表达式将始终为假。

‘px’ 单位不适用于 ‘speech’ 设备，因此以下媒体查询始终为假：

<link rel="stylesheet" media="speech and (min-device-width: 800px)" href="example.css" />

注意，如果在媒体查询开头添加关键字 ‘not’，则本例中的媒体查询将为真。

为了避免循环依赖，除非其他特性明确指定它影响媒体查询的解析，否则在计算表达式时无需应用样式表。例如，打印文档的纵横比可能会受到样式表的影响，但涉及 ‘device-aspect-ratio’ 的表达式将基于用户代理的默认纵横比。

用户代理应当（但不要求）在用户环境发生变化时重新评估和重新布局页面，例如设备从横向模式切换到纵向模式。

3. 语法

媒体查询语法根据CSS2 语法描述。因此，这里未定义的规则由 CSS2 定义。下面定义的media_query_list产生式替换了 CSS2 中的media_list产生式。[CSS21]

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

COMMENT 记号，如 CSS2 所定义，不出现在语法中（以保持其可读性），但这些记号可以出现在其他记号之间的任意位置。[CSS21]

引入以下新定义：

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

引入以下新记号：

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

RESOLUTION 将添加到 CSS2 的 term 产生式中。

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

除了遵循语法外，每个媒体查询还需要根据各自的规范使用媒体类型和媒体特性，以被视为合格。

下面的示例中，只有第一个媒体查询是合格的，因为“example”媒体类型不存在。

@media all { body { background:lime } }
@media example { body { background:red } }

3.1. 错误处理

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

提议修正 2：要求将‘layer’也视为语法错误，而不是未知的媒体类型，当它被用作媒体类型时。

此更改是问题 7225的结果。

此更改已有测试

已为此更改添加测试到WPT。测试结果可以在wpt.fyi查看。

未知的媒体类型。未知的媒体类型评估为假。实际上，它们被视为与不匹配设备媒体类型的已知媒体类型相同。然而，对于媒体类型‘layer’、‘not’、‘and’、‘only’和‘or’有一个例外。即使它们匹配 IDENT 产生式，它们也不应被视为未知的媒体类型，而应触发格式错误的查询条款。

注意：排除‘layer’是因为在层叠层次的@import url(…) layer;语法中使用它时会引起歧义。参见[CSS-CASCADE-5]。

媒体查询"unknown"将评估为假，除非unknown实际上是受支持的媒体类型。同样，"not unknown"将评估为真。
以下是一个格式错误的媒体查询，因为它使用了‘only’和‘or’作为媒体类型。
```
@media only and or { … }
```
未知的媒体类型与不实际匹配 IDENT 产生式的媒体类型不同。后者属于格式错误的媒体查询条款。
未知的媒体特性。当指定的媒体特性之一未知时，用户代理应将媒体查询表示为"not all"。
```
<link rel="stylesheet" media="screen and (max-weight: 3kg) and (color), (color)" href="example.css" />
```
在这个例子中，第一个媒体查询将被表示为"not all"并评估为假，而第二个媒体查询将被评估为第一个查询未指定的效果。
```
@media (min-orientation:portrait) { … }
```
因为‘orientation’特性不接受‘min-’前缀，所以被表示为"not all"。
未知的媒体特性值。与未知的媒体特性一样，当指定的媒体特性值之一未知时，用户代理应将媒体查询表示为"not all"。

媒体查询(color:20example)为‘color’媒体特性指定了一个未知的值，因此被表示为"not all"。
由于负长度不允许用于‘width’媒体特性，所以这个媒体查询被表示为"not all"：
```
@media (min-width: -100px) { … }
```
格式错误的媒体查询。用户代理在解析媒体查询时遇到意外记号时，应继续读取直到媒体查询结束，同时遵守配对规则（）、[]、{}、"" 和''，并正确处理转义符。具有意外记号的媒体查询表示为"not all"。[CSS21]
```
@media (example, all,), speech { /* 仅适用于语音设备 */ }
@media &test, screen           { /* 仅适用于屏幕设备 */ }
```
以下是一个格式错误的媒体查询，因为在‘and’和表达式之间没有空格是不允许的。（这是保留给函数表示法语法的。）
```
@media all and(color) { … }
```
媒体查询还应遵循宿主语言的错误处理规则。
```
@media test;,all { body { background:lime } }
```
…将不会生效，因为分号终止了 CSS 中的@media规则。

4. 媒体特性

从语法上看，媒体特性类似于 CSS 属性：它们有名称并接受特定值。然而，属性和媒体特性之间有几个重要的区别：

属性用于声明中，提供关于如何呈现文档的信息。媒体特性则用于表达式中，描述输出设备的要求。
大多数媒体特性接受可选的‘min-’或‘max-’前缀，用于表达“大于或等于”和“小于或等于”的约束。此语法用于避免可能与 HTML 和 XML 冲突的“<”和“>”字符。那些接受前缀的媒体特性通常会与前缀一起使用，但也可以单独使用。
属性总是需要一个值来形成声明。另一方面，媒体特性可以在没有值的情况下使用。对于媒体特性feature，(feature)如果(feature:x)对于一个值x（非零或零后跟单位标识符，即非0、0px、0em等）评估为真，那么(feature)将评估为真。带有 min/max 前缀的媒体特性不能在没有值的情况下使用。当带有 min/max 前缀的媒体特性在没有值的情况下使用时，它将使媒体查询变得格式错误。
属性可能接受更复杂的值，例如涉及多个其他值的计算。媒体特性只接受单个值：一个关键字、一个数字，或带有单位标识符的数字。（唯一的例外是‘aspect-ratio’和‘device-aspect-ratio’媒体特性。）

例如，‘color’媒体特性可以形成没有值的表达式（‘(color)’），或带有值的表达式（‘(min-color: 1)’）。

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

4.1. 宽度

值: <length>
适用于: 视觉和触觉媒体类型
接受 min/max 前缀: 是

‘width’ 媒体特性描述输出设备目标显示区域的宽度。对于连续媒体，这是视口的宽度（如 CSS2，第 9.1.1 节[CSS21]所述），包括渲染的滚动条的大小（如果有）。对于分页媒体，这是页面框的宽度（如 CSS2，第 13.2 节[CSS21]所述）。

指定的 <length> 不能为负值。

例如，这个媒体查询表达了样式表可用于宽度大于 25cm 的打印输出：

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

这个媒体查询表达了样式表可用于视口（屏幕/纸张上渲染文档的部分）宽度在 400 到 700 像素之间的设备：

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

这个媒体查询表达了如果视口宽度大于 20em，则样式表可用于屏幕和手持设备。

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

‘em’ 值相对于‘font-size’的初始值。

4.2. 高度

值: <length>
适用于: 视觉和触觉媒体类型
接受 min/max 前缀: 是

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

指定的 <length> 不能为负值。

4.3. 设备宽度

值: <length>
适用于: 视觉和触觉媒体类型
接受 min/max 前缀: 是

‘device-width’ 媒体特性描述输出设备的渲染表面的宽度。对于连续媒体，这是屏幕的宽度。对于分页媒体，这是页面纸张大小的宽度。

指定的 <length> 不能为负值。

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

在上面的例子中，样式表将仅适用于当前显示正好 800 个水平像素的屏幕。‘px’ 单位是逻辑单位，如单位部分所述。

4.4. 设备高度

值: <length>
适用于: 视觉和触觉媒体类型
接受 min/max 前缀: 是

‘device-height’ 媒体特性描述输出设备的渲染表面的高度。对于连续媒体，这是屏幕的高度。对于分页媒体，这是页面纸张大小的高度。

指定的 <length> 不能为负值。

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

在上面的例子中，样式表将仅适用于高度正好 600 像素的屏幕。注意，‘px’ 单位的定义与 CSS 的其他部分相同。

4.5. 方向

值: portrait | landscape
适用于: 位图媒体类型
接受 min/max 前缀: 否

‘orientation’ 媒体特性是‘portrait’（纵向）当‘height’ 媒体特性的值大于或等于‘width’ 媒体特性的值时。否则，‘orientation’ 是‘landscape’（横向）。

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

4.6. 宽高比

值: <ratio>
适用于: 位图媒体类型
接受 min/max 前缀: 是

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

4.7. 设备宽高比

值: <ratio>
适用于: 位图媒体类型
接受 min/max 前缀: 是

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

例如，如果具有方形像素的屏幕设备具有 1280 个水平像素和 720 个垂直像素（通常称为“16:9”），以下媒体查询将全部匹配该设备：

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

4.8. 颜色

值: <integer>
适用于: 视觉媒体类型
接受 min/max 前缀: 是

‘color’ 媒体特性描述输出设备的每个颜色组件的位数。如果设备不是彩色设备，则该值为零。

指定的 <integer> 不能为负值。

例如，以下两个媒体查询表示样式表适用于所有彩色设备：

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

这个媒体查询表示样式表适用于每个颜色组件具有 2 位或更多位的彩色设备：

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

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

例如，如果 8 位颜色系统表示红色组件为 3 位，绿色组件为 3 位，蓝色组件为 2 位，则‘color’ 媒体特性的值为 2。

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

所描述的功能只能在表面级别描述颜色能力。如果需要进一步的功能，RFC2531 [RFC2531] 提供了更具体的媒体特性，可能在后续阶段得到支持。

4.9. 颜色索引

值: <integer>
适用于: 视觉媒体类型
接受 min/max 前缀: 是

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

指定的 <integer> 不能为负值。

例如，这里有两种方式表示样式表适用于所有颜色索引设备：

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

这个媒体查询表示样式表适用于具有 256 个或更多条目的颜色索引设备：

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

4.10. 单色

值: <integer>
适用于: 视觉媒体类型
接受 min/max 前缀: 是

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

指定的 <integer> 不能为负值。

例如，这里有两种方式表示样式表适用于所有单色设备：

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

表示样式表适用于具有每像素多于 2 位的单色设备：

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

表示彩色页面的样式表与单色页面的样式表不同：

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

4.11. 分辨率

值: <resolution>
适用于: 位图媒体类型
接受 min/max 前缀: 是

‘resolution’ 媒体特性描述输出设备的分辨率，即像素的密度。在查询具有非方形像素的设备时，在‘min-resolution’查询中，最不密集的维度必须与指定值进行比较，而在‘max-resolution’查询中，最密集的维度必须进行比较。不带“min-”或“max-”前缀的‘resolution’查询从不匹配具有非方形像素的设备。

对于打印机，这对应于筛网分辨率（用于打印任意颜色点的分辨率）。

例如，这个媒体查询表示样式表适用于分辨率大于 300 点每英寸的设备：

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

这个媒体查询表示样式表适用于分辨率大于 118 点每厘米的设备：

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

4.12. 扫描

值: progressive | interlace
适用于: "tv" 媒体类型
接受 min/max 前缀: 否

‘scan’ 媒体特性描述 "tv" 输出设备的扫描过程。

例如，这个媒体查询表示样式表适用于具有渐进扫描的电视设备：

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

4.13. 网格

值: <integer>
适用于: 视觉和触觉媒体类型
接受 min/max 前缀: 否

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

只有 0 和 1 是有效值。（包括 -0。）因此，其他任何值都会创建一个格式错误的媒体查询。

这里有两个例子：

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

5. 值

本规范还引入了两个新值。

<ratio> 值是一个正的（非零或负）<integer>，后跟可选的空白符，后跟斜线（‘/’），再跟可选的空白符，最后跟一个正的 <integer>。

<resolution> 值是一个正的 <number>，紧跟一个单位标识符（‘dpi’ 或 ‘dpcm’）。

空白符、<integer>、<number> 和本规范使用的其他值与 CSS 的其他部分相同，规范由 CSS 2.1 定义。[CSS21]

6. 单位

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

媒体查询中的相对单位基于初始值，这意味着单位永远不会基于声明的结果。例如，在 HTML 中，‘em’ 单位相对于‘font-size’的初始值。

6.1. 分辨率

‘dpi’ 和 ‘dpcm’ 单位描述输出设备的分辨率，即设备像素的密度。分辨率单位标识符为：

dpi: 每 CSS ‘英寸’ 的点数
dpcm: 每 CSS ‘厘米’ 的点数

在本规范中，这些单位仅用于 ‘resolution’ 媒体特性。

7. 更改

7.1. 自 2022 年 4 月 5 日推荐以来的更改

一个早期的提议修正被规范纳入到推荐中：

先前在第 3.1 节中的“提议修正 1”：澄清关键字 ‘not’、‘and’、‘only’ 和 ‘or’ 不应被视为未知的媒体类型，而应在作为媒体类型使用时作为语法错误处理。

未知媒体类型的计算结果为 false。实际上，它们被视为与设备媒体类型不匹配的已知媒体类型相同。但是，对于媒体类型‘not’、‘and’、‘only’ 和 ‘or’的情况做了例外处理。即使它们与 IDENT 生产匹配，它们也不应被视为未知媒体类型，而是触发格式错误的查询条款。

这项更改的理由可以在2013 年 5 月 30 日 CSS 工作组电话会议的会议记录中找到，并在相关邮件中进行引用。

这项更改的测试已添加到 WPT 中。结果可以在 wpt.fyi 上查看。

提出了一项提议修正：

提议修正 2 在第 3.1 节中：要求‘layer’ 也不能被视为未知媒体类型，而应在作为媒体类型使用时作为语法错误处理。

7.2. 自 2012 年 6 月 19 日推荐以来的更改

引入了提议修正：

提议修正 1 在第 3.1 节中：澄清关键字 ‘not’、‘and’、‘only’ 和 ‘or’ 不应被视为未知的媒体类型，而应在作为媒体类型使用时作为语法错误处理。

还进行了少数编辑和标记修正：

第 2 节：在一个示例中删除了一个多余的属性。

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

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

第 2 节：调整了一个句子，以便其他规范更容易扩展此规范。
为避免循环依赖，~~它从不~~除非另一个特性明确规定它影响媒体查询的解析，否则它不需要应用样式表来评估表达式。
第 3 节：在描述性（而非规定性）句子中使用了更精确的术语来描述 css 的语法。
CSS 样式表通常是 ~~不区分大小写的~~ ASCII 不区分大小写的，媒体查询也是如此。
这一说法的真实性通过测试得到验证。

第 4.13 节：在一个示例中纠正了一个语法错误。

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

更新了文献引用，指向最新版本。
更新了整个规范中的各种链接，从 http 切换到 https。

7.3. 自 2010 年 7 月 27 日候选推荐以来的更改

自 2010 年 7 月 27 日候选推荐以来，对本规范进行了以下更改：

第 4.11 节：澄清了打印机的分辨率含义，因为对点数的含义存在歧义。

对于打印机，这对应于网屏分辨率（打印任意颜色的点的分辨率）。
第 6.1 节：明确指出提到的‘inch’和‘cm’是 CSS 单位，而不是物理单位。

dpi

每CSS ‘英寸’英寸的点数

dpcm

每CSS ‘厘米’厘米的点数
第 4.1 节：调整了错误的非规范性措辞，以匹配第 6 节中的正确规范性措辞。

‘em’ 值是相对于~~根元素的字体大小~~‘font-size’ 的初始值。
第 6 节：澄清了单位永远不会基于声明结果。

媒体查询中的相对单位基于初始值，这意味着单位永远不会基于声明的结果。例如，在 HTML 中，‘em’ 单位相对于‘font-size’的初始值。

致谢

本规范是 W3C 层叠样式表工作组的成果。

来自 Björn Höhrmann、Christoph Päper、Chris Lilley、Simon Pieters、Rijk van Geijtenbeek、Sigurd Lerstad、Arve Bersvendsen、Susan Lesch、Philipp Hoschka、Roger Gimson、Steven Pemberton、Simon Kissane、Melinda Grant 和 L. David Baron 的评论改进了本规范。

隐私考虑

在本规范上没有报告新的隐私考虑事项。

安全考虑

在本规范上没有报告新的安全考虑事项。

参考文献

规范性参考文献


[CSS21]: Bert Bos 等人. 层叠样式表第 2 级修订版 1（CSS 2.1）规范。 2011 年 6 月 7 日. W3C 推荐. URL: http://www.w3.org/TR/2011/REC-CSS2-20110607

其他参考文献


[HTML401]: Dave Raggett, Arnaud Le Hors 和 Ian Jacobs. HTML 4.01 规范。 1999 年 12 月 24 日发布，2018 年 3 月 27 日取代。W3C 推荐. URL: https://www.w3.org/TR/2018/SPSD-html401-20180327/
[HTML]: Anne van Kesteren 等人. HTML 标准. 现行标准. URL: https://html.spec.whatwg.org/multipage/
[RFC2531]: G. Klyne 和 L. McIntyre. Internet 传真内容特征架构。 1999 年 3 月. Internet RFC 2531. URL: http://www.ietf.org/rfc/rfc2531.txt
[XMLSTYLE]: James Clark, Simon Pieters 和 Henry S. Thompson. 将样式表与 XML 文档关联 1.0（第二版） 2010 年 10 月 28 日. W3C 推荐. URL: http://www.w3.org/TR/2010/REC-xml-stylesheet-20101028/
[CSS-CASCADE-5]: Elika Etemad, Miriam Suzanne 和 Tab Atkins Jr.。 CSS 层叠和继承第 5 级。 2022 年 1 月 13 日。候选推荐。 URL: https://www.w3.org/TR/css-cascade-5/