使用媒体查询

**媒体查询**允许您根据设备的媒体类型（例如打印与屏幕）或其他功能或特性（例如屏幕分辨率或方向、纵横比、浏览器视窗宽度或高度、用户偏好（例如偏好减少运动、数据使用或透明度）等）来应用 CSS 样式。

媒体查询用于以下目的：

**注意：**本页上的示例出于说明目的使用 CSS 的 @media，但基本语法对所有类型的媒体查询都是一样的。

语法

媒体查询由一个可选的媒体类型和任意数量的媒体特征表达式组成，这些表达式可以选择使用逻辑运算符以各种方式组合。媒体查询不区分大小写。

当媒体类型（如果指定）与显示文档的设备匹配并且所有媒体特征表达式都计算为真时，媒体查询计算为true。涉及未知媒体类型的查询始终为假。

注意： 带有媒体查询附加到其 <link> 标记的样式表 仍然会下载，即使查询返回false，下载也会发生，但下载的优先级会低得多。但是，除非查询结果更改为true，否则其内容将不会应用。您可以在 Tomayac 的博客中阅读为什么会发生这种情况 为什么浏览器下载带有不匹配媒体查询的样式表。

定位媒体类型

媒体类型描述给定设备的一般类别。尽管网站通常是针对屏幕设计的，但您可能希望创建针对特定设备（如打印机或基于音频的屏幕阅读器）的样式。例如，此 CSS 针对打印机

css
@media print {
  /* … */
}

您还可以针对多个设备。例如，此 @media 规则使用两个媒体查询来同时针对屏幕和打印设备

css
@media screen, print {
  /* … */
}

有关可用媒体类型的列表，请参阅 媒体类型。因为媒体类型以非常广泛的术语描述设备，所以大多数最初定义的媒体类型已被弃用，只剩下 screen、print 和 all。要针对更具体的属性，请改用媒体特征。

定位媒体特性

媒体特征描述给定 用户代理、输出设备或环境的特定特征。例如，您可以将特定样式应用于宽屏显示器、使用鼠标的计算机或在弱光条件下使用的设备。此示例在用户的主要输入机制（如鼠标）可以悬停在元素上时应用样式

css
@media (hover: hover) {
  /* … */
}

媒体特征可以是范围或离散的。

离散特征从可能的关键字值的 枚举 集中获取其值。例如，离散 orientation 特征接受 landscape 或 portrait。

css
@media print and (orientation: portrait) {
  /* … */
}

许多范围特征可以添加前缀 “min-” 或 “max-” 来表示 “最小条件” 或 “最大条件” 约束。例如，此 CSS 仅当浏览器 视窗 宽度等于或小于 1250 像素时应用样式

css
@media (max-width: 1250px) {
  /* … */
}

这也可以写成

css
@media (width <= 1250px) {
  /* … */
}

使用媒体查询范围特征，您可以使用包含的 min- 和 max- 前缀，也可以使用更简洁的范围语法运算符 <= 和 =>。

以下媒体查询是等效的

css
@media (min-width: 30em) and (max-width: 50em) {
  /* … */
}

@media (30em <= width <= 50em) {
  /* … */
}

上面的范围比较是包含的。要排除比较值，请使用 < 和 >。

css
@media (30em < width < 50em) {
  /* … */
}

如果您创建媒体特征查询而没有指定值，只要特征的值不为 0 或 none，嵌套的样式就会被使用。例如，此 CSS 将应用于任何具有彩色屏幕的设备

css
@media (color) {
  /* … */
}

如果特征不适用于浏览器正在运行的设备，则涉及该媒体特征的表达式始终为假。

有关更多 媒体特征 示例，请参阅每个特定特征的参考页面。

创建复杂的媒体查询

有时您可能希望创建依赖于多个条件的媒体查询。这就是逻辑运算符的作用：not、and 和 only。此外，您可以将多个媒体查询组合成逗号分隔列表；这允许您在不同的情况下应用相同的样式。

在前面的示例中，我们看到了 and 运算符用于将媒体类型与媒体特征组合。and 运算符还可以将多个媒体特征组合成单个媒体查询。与此同时，not 运算符会否定媒体查询，基本上会反转其正常含义。only 运算符会阻止旧版浏览器应用样式。

注意： 在大多数情况下，当没有指定其他类型时，默认情况下会使用 all 媒体类型。但是，如果您使用 only 运算符，则必须显式指定媒体类型。您可以看到 only screen 或 only print 作为一个整体。

组合多个类型或特征

and 关键字将媒体特征与媒体类型或其他媒体特征组合。此示例组合了两个媒体特征，将样式限制为纵向设备，宽度至少为 30 个 em

css
@media (min-width: 30em) and (orientation: landscape) {
  /* … */
}

要将样式限制为具有屏幕的设备，您可以将媒体特征链接到 screen 媒体类型

css
@media screen and (min-width: 30em) and (orientation: landscape) {
  /* … */
}

测试多个查询

您可以使用逗号分隔的媒体查询列表来应用样式，当用户的设备匹配各种媒体类型、特征或状态中的任何一个时。

以下规则包含两个媒体查询。如果用户的设备高度为 680 像素或更高或浏览器视窗处于纵向模式（视窗高度大于视窗宽度），则该块的样式将应用。

css
@media (min-height: 680px), screen and (orientation: portrait) {
  /* … */
}

在此示例中，如果用户正在打印到 PDF 并且页面高度为 800 像素，则媒体查询将返回 true，因为第一个查询组件（测试视窗高度是否为 680px 或更高）为 true。同样，如果用户在具有 480 像素视窗高度的智能手机上处于纵向模式，则媒体查询将返回 true，因为第二个查询组件为 true。

在逗号分隔的媒体查询列表中，各个媒体查询以逗号结尾，或者，对于列表中的最后一个媒体查询，以左括号 ({) 结尾。

反转查询的含义

not 关键字会反转单个媒体查询的含义。例如，此媒体查询中的 CSS 样式将应用于除打印媒体以外的所有内容

css
@media not print {
  /* … */
}

not 仅否定其应用到的媒体查询。没有括号的 not 会否定它所包含的媒体查询中的所有特征。这意味着，在逗号分隔的媒体查询列表中，每个 not 都应用于它所包含的单个查询，应用于该单个查询中的所有特征。在此示例中，not 应用于第一个媒体查询，该查询在第一个逗号处结束

css
@media not screen and (color), print and (color) {
  /* … */
}

上面的查询的评估方式如下

css
@media (not (screen and (color))), print and (color) {
  /* … */
}

这两个示例都是有效的。媒体条件可以通过将它们括在括号 (()) 中来分组。然后，这些组可以像单个媒体查询一样嵌套在条件中。

not 在媒体查询中最后进行评估，这意味着它应用于整个媒体查询，而不是应用于查询中的单个特征，就好像在 not 之后立即添加了一个左括号并在媒体查询的末尾关闭一样。

以下查询

css
@media not all and (monochrome) {
  /* … */
}

的评估方式如下

css
@media not (all and (monochrome)) {
  /* … */
}

它不会像这样评估

css
@media (not all) and (monochrome) {
  /* … */
}

要否定媒体查询中的单个特征，请使用括号。将 not 和媒体特征包含在括号中会限制被否定的查询组件。

在此示例中，我们否定了 hover 媒体特征，但没有否定 all 媒体类型

css
@media all and (not(hover)) {
  /* … */
}

not(hover) 匹配如果设备没有悬停功能。在这种情况下，由于有括号，not 应用于 hover 但不应用于 all。

提高与旧版浏览器的兼容性

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

css
@media only screen and (color) {
  /* … */
}

使用 or 测试多个特征

您可以使用 or 测试多个特征中的匹配项，如果任何特征为 true，则解析为 true。例如，以下查询测试具有单色显示器或悬停功能的设备

css
@media (not (color)) or (hover) {
  /* … */
}

另请参阅