《CSS权威指南4》- Chapter1.4 - 媒体查询

媒体查询

使用媒体查询，作者可以定义浏览器使用给定的样式表的媒体环境。在过去，这是通过手动在link元素、style元素或使用@import、@media声明设置上设置媒体类型来实现的。媒体查询通过允许作者使用所谓的媒体描述符根据给定媒体类型的特性选择样式表，将这一概念又向前推进了几步。

用法

媒体查询可以在以下地方使用：

• link 元素 的 media 属性
• style 元素 的 media 属性
• @import 声明 的媒体描述符部分
• @media 声明 的媒体描述符部分

媒体的查询范围可以从简单的媒体类型到复杂的媒体类型和特性 组合

简单的媒体查询

在介绍媒体查询的所以可能性之前，让我们先看看简单的媒体块。假设我们想要一些不同的样式用于在投影设置中显示样式的情况，例如幻灯片显示。这里有两个简单的 CSS 片段：

h1 {
  color: maroon;
}
@media projection {
  body {
    background: yellow;
  }
}

在本例中，h1 元素 将在所以媒体中被涂成褐红色，但是 body 元素只在投影媒介中才会得到黄色背景。
在给定的样式表中可以有任意数量的@media 块，每个块都有自己的一组媒体描述符，甚至可以将所以规则封装在一个@media 块中：

@media all {
  h1: {
    color: maroon;
  }
  body {
    background: yellow;
  }
}

在这些例子中projection和all的地方就是设置媒体查询的地方。这些查询依赖于 媒体类型的描述 和 媒体参数的描述 的组合，以 CSS 块确定何时被应用。

媒体类型

媒体查询最基本的形式是媒体类型，它首次出现在 CSS2 中。以下是不同媒体类型的简单标签：

• all，适用所有的展示媒体
• print，为有视力是用户打印文档时使用，也用于文档的打印预览展示
• screen, 当以屏幕媒体（如桌面计算机显示器）显示文档时使用。所以的 web 浏览器也都是屏幕介质的用户代理。一些浏览器也支持投影，它允许文档以幻灯片的形式显示。一些移动浏览器支持 手持类型（handheld）。

可以使用逗号分隔的列表指定多个每媒体类型。以下四个例子都是在屏幕和打印媒体中应用样式表（或规则块）的等效方法：

<link type="text/css" href="demo.css" media="screen, print">
<style type="text/css" media="sreen, print">
  body {
    font-size: 15px;
  }
</style>

@import url(foo.css) screen, print;
@media screen, print {
  font-size: 15px;
}

当向这些媒体类型添加特性的描述符时，会更有趣。例如 描述给定媒体的分辨率或颜色深度的值。

媒体描述符

对于任何曾经在 link 元素或@import 声明上设置过媒体类型的作者，媒体查询的位置将是非常熟悉的。以下是在彩色打印机上渲染文档时应用外部样式表的两种本质上等效的方法：

<link href="print-color.css" type="text/css" media=""print and (color) rel="stylesheet">

@import url(print-color.css) print and (color);

在可以使用媒体类型的任何地方，都可以使用媒体查询。这意味着，按照上一级的示例，可以在逗号分隔的列表中列出多个查询：

<link href="print-color.css" tyoe="text/css" media="print and (color), screen and (color-depth:8)" ref="stylesheet">

@import url(print-color.css) print and (color), screen and (colo-depth: 8);

在任何情况下，即使其中一个媒体查询的结果未“true”,也会应用相关联的样式表。因此，前面给定的@import,print-color.css被应用在彩色打印机或彩色足够充足的屏幕环境。如果在黑白打印机上打印，两个查询结果都是“false”,print-color.css将不会应用到文档中。这同样适用于任何屏幕媒体。

每个媒体描述符由一个媒体类型和一个或多个列出的媒体特性组成，每个媒体特性描述符使用括号括起。如果没有提供媒体类型，则假设为 all，这使得下面两个例子等价：

@media all and (min-resolution: 96dpi) { ... }
@media (min-resolutionL 96dpi) { ... }

一般来讲，媒体特性描述符的格式类似于 CSS 中的属性-值 对。有些不同之处，最明显的是一些特性可以在没有值的情况指定。例如，任何基于颜色的媒体都将使用（color）进行匹配，而任何使用 16 位颜色深度的媒体都将是使用（color: 16）进行匹配。实际上，使用没有值的描述符是对该描述符的真/假测试：（color）的意思是“这个媒介是彩色的吗？”

多个特性描述符可以用and逻辑关键字链接。事实上，媒体查询有两个逻辑关键字：

• and
  将两个或多个媒体特性链接在一起，所有特性都为真，查询才为真。例如：(color) and (orentation: landscape) and (mid-device-width: 800px)意味着必须满足所有 3 个条件，如果媒体环境有颜色，处于横向方向，并且设备的显示宽度至少为 800px，这样样式表才被应用。
• not
  否定整个查询，如果所以条件都为真，则不应用样式表。例如：not (color) and (orientation: landscape) and (min-device-widht: 800px)意味着如果满足所以 3 个条件，则否定该语句。因此，如果媒体环境有颜色，是横向的，而且设备的显示宽度至少 800px，那么样式表将不被应用。在所以其他情况下，样式表都将被应用。
  注意： not 关键字 只能在媒体查询开头使用。像(color) and not (min-device-width: 800px)的代码是不合法的，在这种 情况下，查询将被忽略。

媒体查询中没有OR关键字。实际上，分隔查询列表的逗号具有 OR 的功能。print, screen意思是“如果媒体是打印机或屏幕”。screen and (max-color: 2) or (monochrome)是不合法的，将被忽略。因该写成screen and (max-color: 2), screen and (monochrome).

还有一个关键字only，它被设计成故意向后不兼容

• only
  用于隐藏样式表，使其不被那些太老旧而不支持媒体查询的浏览器看到。例如，要将样式表应用于所有媒体，但只适用于那些支持媒体查询的浏览器，应该写成@import url(new.css) only all。支持媒体查询的浏览器中，only 关键字会被忽略，样式表被应用。在不支持的浏览器中，only 关键字创建了一个明显的媒体类型only all，这是无效的，因此，样式表不会应用于 这些浏览器。*注意： only 关键字只能用在媒体查询的开头。

媒体特性描述符和值类型

迄今为止，我们已经在示例中看到了许多媒体特性描述符，但是还没有一个完整的列表 ，下面是所有可能的描述符列表（目前截至到 2017 年底）：

with	aspect-ratio	color-index
min-width	min-aspect-ratio	min-color-index
max-width	max-aspect-ratio	max-color-index
device-width	device-aspect-ratio	momochrome
min-device-width	min-device-aspect-ratio	min-monochrome
max-device-width	max-device-aspect-ratio	max-monochrome
height	color	resolution
min-height	min-color	min-resolution
max-height	max-color	max-resolution
device-height		orientation
min-device-height	ratio	scan
max-device-height	resolution	grid