媒体查询

... 2025-7-10 大约 6 分钟

媒体查询（Media queries）非常实用，尤其是当你想要根据设备的大致类型（如打印设备与带屏幕的设备）或者特定的特征和设备参数（例如屏幕分辨率和浏览器视窗宽度）来修改网站或应用程序时。

媒体查询常被用于以下目的：

使用 CSS @media 和@import @规则有条件地应用样式。
用 media= 属性为 <style>, <link>, <source> 和其他 HTML 元素指定特定的媒体类型，如：

<link rel="stylesheet" src="styles.css" media="screen" />
<link rel="stylesheet" src="styles.css" media="print" />

1
2

使用 Window.matchMedia() (opens new window) 和 MediaQueryList.addListener() (opens new window) 方法来测试和监控媒体状态 (opens new window)。

# 语法

每条媒体查询语句都由一个可选的媒体类型和任意数量的媒体特性表达式构成。

可以使用多种逻辑操作符合并多条媒体查询语句。

媒体查询语句不区分大小写。

当媒体类型（如果指定）与在其上显示文档的设备匹配并且所有媒体功能表达式都计算为 true 时，媒体查询将计算为 true。

涉及未知媒体类型的查询始终为 false。

即使媒体查询返回 false，带有媒体查询附加到其<link>标记的样式表仍将下载。但是，除非查询结果变为 true，否则其内容将不适用。

# 媒体类型

媒体类型（Media types）描述设备的一般类别。

除非使用 not 或 only 逻辑操作符，媒体类型是可选的，并且会（隐式地）应用 all 类型。

all

适用于所有设备。
print

适用于在打印预览模式下在屏幕上查看的分页材料和文档。
screen

主要用于屏幕。
speech

主要用于语音合成器。

在大多数情况下，默认情况下，如果未指定其他类型，则使用 all 媒体类型。但是，如果使用 not 或 only 运算符，则必须显式指定媒体类型

被废弃的媒体类型

CSS2.1 和 Media Queries 3 定义了一些额外的媒体类型(tty, tv, projection, handheld, braille, embossed, 以及 aural)，但是他们在 Media Queries 4 中已经被废弃，并且不应该被使用。aural 类型被替换为具有相似效果的 speech。

# 媒体特性

媒体特性（Media features）描述了 user-agent、输出设备，或是浏览环境的具体特征。媒体特性表达式是完全可选的，它负责测试这些特性或特征是否存在、值为多少。每条媒体特性表达式都必须用括号括起来。

any-hover

是否有任何可用的输入机制允许用户（将鼠标等）悬停在元素上？
any-pointer

可用的输入机制中是否有任何指针设备，如果有，它的精度如何？
aspect-ratio

视窗（viewport）的宽高比
color

输出设备每个像素的比特值，常见的有 8、16、32 位。如果设备不支持输出彩色，则该值为 0
color-gamut

用户代理和输出设备大致程度上支持的色域
color-index

输出设备的颜色查询表（color lookup table）中的条目数量，如果设备不使用颜色查询表，则该值为 0

具体见媒体特性 | MDN (opens new window)

# 逻辑操作符

逻辑操作符（logical operators）： not, and, 和 only 可用于联合构造复杂的媒体查询，您还可以通过用逗号分隔多个媒体查询，将它们组合为一个规则。

and

用于将多个媒体查询规则（媒体功能、媒体类型或其他媒体功能）组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真，它还用于将媒体功能与媒体类型结合在一起。
not

用于否定媒体查询，如果不满足这个条件则返回 true，否则返回 false。如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。如果使用 not 运算符，则还必须指定媒体类型。

在 Level 3 中，not 关键字不能用于否定单个媒体功能表达式，而只能用于否定整个媒体查询。

only

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

逗号用于将多个媒体查询合并为一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何查询为 true，则整个 media 语句均返回 true。换句话说，列表的行为类似于逻辑或 or 运算符。

# 举例

定位媒体类型

@media screen, print {
  /* 此@media规则使用两个媒体查询来同时定位屏幕和打印设备 */
}

1
2
3

定位媒体特性

@media (hover: hover) {
  /* 当用户的主要输入机制（例如鼠标）可以悬停在元素上时 */
}

@media (max-width: 12450px) {
  /* 仅当浏览器的viewport宽度等于或小于12450px时 */
}

@media (color) {
  /* 适用于任何带有彩色屏幕的设备 */
}

@media speech and (aspect-ratio: 11/5) {
  /* 当设备为语音设备，且屏幕长宽比为11：5
     此表达式始终为false，因为没有语音专用设备具有屏幕长宽比
  */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

复杂查询

@media (min-width: 30em) and (orientation: landscape) {
  /* 当屏幕宽度至少为30em，且屏幕方向为横向的设备 */
}

@media (min-height: 680px), screen and (orientation: portrait) {
  /* 当设备最小高度为680px时
	 或 为纵向模式的屏幕设备时
	*/
}

1
2
3
4
5
6
7
8
9

反转查询

@media not all and (monochrome) {
} /* 等同于↓ */
@media not (all and (monochrome)) {
} /* 并非 */
@media (not all) and (monochrome) {
  /* 上边的不等于这个 */
}

@media not screen and (color), print and (color) {
} /* 等同于↓ */
@media (not (screen and (color))), print and (color) {
}

1
2
3
4
5
6
7
8
9
10
11
12

浏览器兼容性

only 关键字可防止不支持带有媒体功能的媒体查询的旧版浏览器应用给定的样式。它对现代浏览器没有影响。

@media only screen and (color) {
  ...;
}

1
2
3

# 媒体查询 4 级规范

媒体查询 4 级规范对语法进行了一些改进，以使用具有“范围”类型（例如宽度或高度，减少冗余）的功能进行媒体查询。级别 4 添加了用于编写此类的查询范围上下文。例如，使用最大宽度 max- 功能，我们可以编写以下代码：

@media (max-width: 30em) {
}
/* 4级语法↓ */
@media (width <= 30em) {
}

@media (min-width: 30em) and (max-width: 50em) {
}
/* 4级语法↓ */
@media (30em <= width <= 50em) {
}

1
2
3
4
5
6
7
8
9
10
11

媒体查询 4 级规范还添加了用 and, not, 和 or 实现的完整的布尔运算来合并媒体查询的方法。

使用 not 否定一个特性

@media (not(hover)) {
  /* 当设备没有悬停功能时 */
}

1
2
3

用 or 测试多个特性

@media (not (color)) or (hover) {
  /* 当设备具有单色显示 或 悬停功能 */
}

1
2
3

使用媒体查询 | MDN (opens new window)

Sass、Less、Stylus CSS

媒体查询

# 语法

# 媒体类型

# 媒体特性

# 逻辑操作符

# 举例

# 媒体查询 4 级规范

详情