媒体查询

原文链接： www.w3.org/TR/css3-med…

概念

HTML4 和 CSS2 为了每个不同的媒体类型提供了媒体依赖样式表。

举个例子： 当一个页面使用 sans-serif fonts 作为 Screen 设备的字体， 另一个页面使用 serif fonts 作为 Print设备的字体。

Screen 和 Print 是已经定义的两种媒体类型，为了更详细地描述样式表适用于哪种类型的设备，本文档提出了媒体查询。

一个媒体查询由一个媒体类型和用于限制某一个样式表作用域的一个或多个表达式组成。可以在表达式中使用 width、height、color。通过媒体查询，内容呈现可以针对一系列的设备进行定制，而不需要修改内容本身。

介绍

在 html4 中，可以这样写：

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

在 css 中可以这样写

    @media print {
      * { font-family: serif }
    }
    @media screen {
      * { font-family: sans-serif }
    }
复制代码

print 和 Screen 在 html4 中是八种媒体类型中的两种，下面有一个完整的列表：

• all （全部）
• aural （听觉）
• braille （点字）
• handheld （手持）
• print （打印）
• projection （投影）
• screen （屏幕）
• tty
• tv （电视）
• embossed

CSS2 也定义了相同的列表， 增加了 embossed 以区分盲文触觉反馈设备和盲文打印机。all 表示样式表适用于所有媒体类型。

多个 User Agents 支持媒体特定样式表，最常见的特征是如上例所示，主要是区分 Screen 和 Print。

已经有人要求更详细地描述样式表适应的设备类型的方法，当前的媒体类型名称有些模糊的，例如，当一个设备从 Screen 到 handheld （手持）它是不清晰的。

幸好， HTML4 预计这些需要和为了媒体类型定义了向前兼容语法。www.w3.org/TR/1998/REC…

未来 HTML 的版本可能会介绍一些新的值和允许参数化的值，为了便于引入这些扩展，符合要求的用户代理必须能够解析媒体属性值，如下所示：

1. 值是一个用逗号分离的列表， 例如：

    media="screen, 3d-glasses, print and resolution > 90dpi"
复制代码

会映射成：

    "screen"
    "3d-glasses"
    "print and resolution > 90dpi"  
复制代码

2. 每个入口的第一个字符，如果该字符不是 US ASCII [a-zA-Z] (Unicode decimal 65-90, 97-122) 字符， 数字 [0-9] (Unicode hex 30-39) 或者连字号 (45) 是会被截断的。

    "screen"
    "3d-glasses"
    "print"

复制代码

要求

为了使解决方案能够提供有用的新功能，同时保持向后兼容 HTML4， 应满足一下需要：

1. 解决方案必须详细描述样式表可应用于哪种类型的设备
2. 语法必须适合 html4 中保留的命名空间
3. 语法必须在 CSS 和 XHTMl 的未来版本中可用
4. 解决方案必须提供显著的比现有解决方法更好的表现力但不增加额外成本
5. 解决方案必须使用符合 CSS 和 HTML 的词汇表

一个在 html4 中假定的例子

在提出新语法之前，讨论 html4 规范中的假设实例很有用：

    <link rel="stylesheet" media="screen, 3d-glasses, print and resolution > 90dpi" ... >
复制代码

在上面的例子中有两个逻辑操作符。 , 表示逻辑或， and 表示合，逻辑或 已经是 html4 标准的一部分。 但是 逻辑合 还没有被定义。

在上面的例子中另一个操作符是 大于，用 > 表示。 为了有足够的表现力，这些操作符应该这些的一部分：">", ">=", "<", "<=", and "="。方括号以及 & 符号以 HTML 和 XML 格式保留， 因此不适合使用。

最终，两个不同的词汇表被使用： 一个是媒体功能（media），另一个是单位（dpi）。

相关工作

在 W3C 中，关于 CC/PP （Composite Capabilities 综合能力/Preference Profiles偏好设置文件）的工作已经解决了类似的问题。CC/PP 框架的目标是指定客户端设备如何向服务器表达其功能和首选项。在这个提议中，沟通是另一回事；它是声明样式表适合哪种媒体类型的文档。 但是，媒体功能应该在两种情况下可以使用。

在名为 CC/PP Attribute Vocabularies 工作草案中， 定义了用于打印和显示的客户端词汇表 。在列出的 "属性名字" 中，有5中通用媒体功能：

Name	Value	Description
charWidth	integer	the display width of a the text display device
charHeight	integer	the display height of a text display device
pix-x	integer	the display width of an image display device
pix-y	integer	the display height of an image display device
color	binary、grey、limited、mapped、full	an indication of the color capabilities of the device

最后三个媒体功能是从 RFC 2534: Media Features for Display, Print, and Fax 借来的。

RFC 2534 定义了其他媒体功能：

Name	Value	Description
ua-media	screen、screen-paged、stationery、transparency、envelope、envelope-plain、continuous	Indicates device type
dpi	rational numbers	Resolution in dots per inch
paper-size	letter、a4、b4、a3、legal	The size of the paged output device

由于多种原因， 这些不能直接重复使用：

• 第一个媒体功能，"ua-media" 在 html4 和 CSS2 中媒体类型是同一抽象级别的。但是它覆盖范围适合很狭窄。现在将会被忽略。
• RFC 2534 中描述的媒体功能有三种类型的值：整型、有理数和关键词、 CSS 也使用关键字， 但是对于涉及数字的值，有利于数字和单位的组合 （例如：12px）。
• CSS&FP WG 过去曾考虑过使用页面大小的名称，但由于全球范围内有大量标准，因此决定不这样做。

RFC 2506

已经为媒体功能词汇表建立了一个中央注册机构， 并且建议根据 RFC 2506 注册下面描述的媒体

RFC 2534 的媒体功能是根据 RFC 2506 中描述的过程注册的。The Internet Assigned Numbers Authority (IANA)

媒体查询

本说明建议将媒体查询添加到 CSS 和 HTML中。媒体查询由媒体类型和一个或多个媒体功能表达式组成。 下面是一个简单的 html 的例子：

    <link rel="stylesheet" media="screen and (color)" href="http://style.com/color">
复制代码

上面的实例表示某个样式表（从 style.com/color 找到）适用于具有某些特征和某种媒体类型 （"Screen"）的设备 （它必须是彩色屏幕）。

这是一个用 CSS 编写的稍微复杂的例子：

    @media print and (min-height: 11in) { 
      IMG { display: none }
    }
复制代码

上面的例子表示在小于 11 英寸高的打印之上， img 元素 不应该被打印。

在上面的两个例子中， 媒体查询是加粗的。请注意， CSS 和 HTMl 都可以使用完全相同的语法。

这是媒体查询的伪BNF定义：

    media_query: [only | not]? <media_type> [ and <expression> ]*
    expression: ( <media_feature> [: <value>]? )
    media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed
    media_feature: width | min-width | max-width 
      | height | min-height | max-height
      | monochrome | min-monochrome | max-monochrome 
      | color | min-color | max-color
      | color-index | min-color-index | max-color-index
      | resolution | min-resolution | max-resolution
复制代码

有关值得定义， 请参阅 CSS2. 下面解释了各种媒体功能。

媒体查询中允许使用关键字 "only" 和 "not" 作为一种方式，避免传统用户代理应用样式表而不使设备满足其他媒体查询条件。 这将起作用， 因为 "only" 和 "not" 不是 html4 的媒体类型。

例子

在现有的语法中，下面表达一些常见的情况：

1. 表示在所有彩色设备里样式表是可使用的：

    <link rel="stylesheet" media="all and (color)" href="http://....">
    @media all and (color) { ... }
复制代码

2. 表示在 paper 和 宽度超过25厘米 里的样式表是可使用的：

    <link rel="stylesheet" media="print and (min-width: 25cm)" href="http://....">
@media print and (min-width: 25cm) { ... }" 
复制代码

3. 表示有一个颜色样式表和另一个单色样式表：

    <link rel="stylesheet" media="print and (color)" href="http://...">
    <link rel="stylesheet" media="print and (monochrome)" href="http://...">
复制代码

4. 表示当视口在 400 到 700 像素之间

    @media screen and (min-width: 400px) and (max-width: 700px) { ... } 
复制代码

5. 表示在 ttv 设备中， 视口是 80 ch 或者更宽

    <link rel="stylesheet" media="tty and (min-width: 80ch)" href="...">
复制代码

现在 ch 单位已经不是 CSS1/CSS2 的一部分了。

6. 表示在 手持设备 中并且视口宽度大于 20em：

    @media handheld and (min-width: 20em), 
  screen and (min-width: 20em) { ... }
复制代码

7. 表示样式表在分辨率大于 300 dpi 的设备上可用：

    @media print and (min-resolution: 300dpi)  { ... }
复制代码

媒体功能

本说明提出了七种可用于视觉和触觉设备的媒体功能。同样，可以为听觉媒体类型定义媒体功能。

所有媒体功能都采用'min-'或'max-'前提来表达约束。如果值不为零，则表达式返回true。实际上，除“彩色”和“单色”之外的所有媒体功能都只能用于前缀。

width

Values: length

Units: all CSS2 length units + "ch"

Applies to: visual and tactile media types

height

Values: length

Units: all CSS2 length units + "ch"

Applies to: visual and tactile media types

viewport-aspect-ratio

Values: 16:9 | 4:3

Units:

Applies to: tv

color

Values:

Units: 看下文

Applies to: visual media types

彩色 媒体功能保持每个颜色分量的最小位数。如果设备不是彩色设备，则返回0。例如，这是如何表示样式表适用于所有颜色设备：

    @media all and (color) { ... }
复制代码

这是如何表示样式表适用于每个颜色分量具有2位或更多彩色设备：

    @media all and (min-color: 2) { ... }
复制代码

例如，如果8位颜色系统表示红色分量为3位，绿色分量为3位，蓝色分量为2位，则“彩色”媒体功能的值为2.

在设备中对于索引颜色，“彩色”媒体特征将会返回查找表中每个颜色的分量的最小位数。

所描述的功能仅能够在表面上描述颜色功能。如果需要进一步的功能，RFC 2531（因特网传真的内容特征模式）提供更具体的媒体查询，例如：CIELAB-L-depth CIELAB-a-depth CIELAB-b-depth CIELAB-L-min CIELAB-L-max CIELAB -a-min CIELAB-a-max CIELAB-b-min CIELAB-b-max。

color-index

Values:

Units: see below

Applies to: visual media types

color-index 媒体功能保存颜色查找表中的条目数。如果设备不是一个颜色索引设备，将会返回 0. 例如，下面是表达样式表应用所有 颜色索引设备

    @media all and (min-color-index: 1) { ... }
复制代码

例如，下面是表达样式表应用所有颜色是 256 或者更多条目的 颜色索引设备

    @media all and (min-color-index: 256) { ... }
复制代码

monochrome

Values:

Units: 看下文

Applies to: visual media types

“单色”媒体功能保持单色帧缓冲器中每像素的位数。如果设备不是单色设备，则返回0。例如，这是如何表示样式表适用于所有单色设备：

    @media all and monochrome { ... }
复制代码

这是表示样式表适用于每个超过2位的单色设备的方式像素：

    @media all and (min-monochrome: 2) { ... }
复制代码

resolution

Values:

Units: dpi, li

Applies to: dpi applies to bit mapped media types, li applies to tv media types

'li'单位描述了电视中可见水平线的数量。可以使用height属性表达相同的功能（例如，'height：575px'）。这仍然是一个悬而未决的问题。

scan

Values: progressive | interlace

Units:

Applies to: tv

New units

下面描述的单元在某些媒体查询中有效，并且可能会或可能不会在其他CSS上下文中可用。

• ch
• dpi
• li

转载于:https://juejin.im/post/5ce60531f265da1b855c2da8