CSS媒体查询（@media）全面解析

随着移动设备的快速普及，用户不再只是通过传统的电脑系来浏览 Web 内容，越来越多的用户开始使用各种尺寸的智能手机、平板电脑或者其它设备来浏览 Web 内容，为了确保使用不同设备的用户都能拥有不错的体验就需要用到媒体查询。

媒体查询是 CSS 样式表最重要的功能之一，所谓媒体查询指的就是根据不同的媒体类型（设备类型）和条件来区分各种设备（例如：电脑、手机、平板电脑、盲文设备等），并为它们分别定义不同的 CSS 样式。媒体查询能让 CSS 可以更精确的作用于不同的设备或同一设备的不同条件，让所有用户都能得到很好的用户体验。

1. 媒体类型

媒体类型用来表示设备的类别，CSS 中提供了一些关键字来表示不同的媒体类型，如下表所示：

媒体类型	描述
all	表示所有的媒体设备
aural	表示语音和音频成器（听觉设备）
braille	表示盲人用点字法触觉回馈设备
embossed	表示盲人用点字法打印机
handheld	表示小型手持设备，如手机、平板电脑
print	表示打印机
projection	表示投影设备
screen	表示电脑显示器
tty	表示使用固定密度字母栅格的媒体，比如打字机或终端设备
tv	表示电视机类型的设备

2. 媒体特性

除了具体的类型外，还可以通过一些属性来描述设备的具体特征，例如宽度、高度、分辨率等，如下表所示：

值	描述
aspect-ratio	输出设备页面可见区域的宽高比
color	输出设备每个像素的比特值，常见的有 8、16、32 位。如果设备不支持输出彩色，则该值为 0
color-index	输出设备的颜色查询表中的条目数量。如果没有使用颜色查询表，则该值等于 0
device-aspect-ratio	输出设备的宽高比
device-height	输出设备屏幕的可见高度
device-width	输出设备屏幕的可见宽度
grid	查询输出设备使用的是网格屏幕还是点阵屏幕
height	页面可见区域的高度
max-aspect-ratio	输出设备屏幕可见区域宽度与高度的比率
max-color	输出设备每个像素比特值的值
max-color-index	输出设备的颜色查询表中的条目数
max-device-aspect-ratio	输出设备屏幕可见区域宽度与高度的比率
max-device-height	输出设备屏幕可见区域的高度
max-device-width	输出设备屏幕的可见宽度
max-height	页面可见区域的高度
max-monochrome	输出设备单色帧缓冲区中每个像素的位深度。如果设备并非黑白屏幕，则该值为 0
max-resolution	设备的分辨率
max-width	页面可见区域的宽度
min-aspect-ratio	输出设备屏幕可见区域宽度与高度的最小比率
min-color	输出设备每个像素比特值的最小值
min-color-index	输出设备的颜色查询表中的最小条目数
min-device-aspect-ratio	输出设备的屏幕可见区域宽度与高度的最小比率
min-device-width	输出设备的屏幕的最小可见宽度
min-device-height	输出设备的屏幕的最小可见高度
min-height	页面可见区域的最小高度
min-monochrome	输出设备单色帧缓冲区中每个像素的最小位深度。如果设备并非黑白屏幕，则该值为 0
min-resolution	设备的最小分辨率
min-width	页面可见区域的最小宽度
monochrome	输出设备单色帧缓冲区中每个像素的位深度。如果设备并非黑白屏幕，则该值为 0
orientation	页面可见区域的旋转方向
resolution	设备的分辨率。如：96dpi、300dpi、118dpcm
scan	电视类设备的扫描工序
width	页面可见区域的宽度

3. 逻辑操作符

逻辑操作符包含 not、and 和 only 三个，通过逻辑操作符可以构建复杂的媒体查询，您还可以通过逗号来分隔多个媒体查询，将它们组为一个规则。

• and：用于将多个媒体查询组成一条媒体查询，当每个查询规则都为真时则该条媒体查询为真，另外通过 and 操作符还可以将媒体特性与媒体类型结在一起；

• not：用于否定媒体查询，当查询规则不为真时则返回 true，否则返回 false。如果使用 not 操作符，则还必须指定媒体类型；

• only：仅在整个查询匹配时才会生效，当不使用 only 时，旧版的浏览器会将 screen and (max-width: 500px) 简单地解释为 screen，忽略查询的其余部分，并将样式应用于所有屏幕。 如果使用 only 运算符，则还必须指定媒体类型。

4. 定义媒体查询

目前您可以通过以下两种方式来定义媒体查询：

• 使用 @media 或 @import 规则在样式表中指定对应的设备类型；

• 用 media 属性在 <style>、<link>、<source> 或其他 HTML 元素中指定特定的设备类型。

1) @media

在《CSS @规则》一节中我们已经简单了解 @media，使用 @media 您可以指定一组媒体查询和一个 CSS 样式块，当且仅当媒体查询与正在使用的设备匹配时，指定的 CSS 样式才会应用于文档。示例代码如下：

/* 在小于或等于 992 像素的屏幕上，将背景色设置为蓝色 */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* 在 600 像素或更小的屏幕上，将背景色设置为橄榄色 */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}

2) @import

@import 用来导入指定的外部样式文件并指定目标的媒体类型，示例代码如下：

@import url("css/screen.css") screen;   /* 引入外部样式，该样式仅会应用于电脑显示器 */
@import url("css/print.css") print;     /* 引入外部样式，该样式仅会应用于打印设备 */
body {
background: #f5f5f5;
line-height: 1.2;
}

注意：所有 @import 语句都必须出现在样式表的开头，而且在样式表中定义的样式会覆盖导入的外部样式表中冲突的样式。

3) media 属性

您还可以在 <style>、<link>、<source> 等标签的 media 属性中来定义媒体查询，示例代码如下：

/* 当页面宽度大于等于 900 像素时应用该样式 */
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
/* 当页面宽度小于等于 600 像素时应用该样式 */
<link rel="stylesheet" media="screen and (max-width: 600px)" href="allscreen.css">

提示：在 media 属性中您还可以指定多种媒体类型，每种媒体类型之间使用逗号进行分隔，例如 media="screen, print"。