媒体查询：使用媒体查询 | Media Queries: Using media queries

当您想要根据设备的一般类型（如打印与屏幕），特定特征（如浏览器视口的宽度）或环境（如环境光线条件）应用CSS样式时，媒体查询很有用。由于当今互联网连接设备种类繁多，媒体查询是构建网站和应用程序的重要工具，这些网站和应用程序足够强大，可以处理用户拥有的任何硬件。

目标媒体类型

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

@media print { ... }

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

@media screen, print { ... }

请参阅媒体类型以获取所有媒体类型的列表。因为它们只是用非常广泛的术语来描述设备，所以只有少数可用; 针对更具体的属性，而不是使用媒体功能。

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

@media (hover: hover) { ... }

许多媒体特征是范围特征，这意味着它们可以用“min-”或“max-”作为前缀来表示“最小条件”或“最大条件”约束。例如，只有当浏览器的视口等于或小于12,450像素时，此CSS才会应用样式：

@media (max-width: 12450px) { ... }

如果您创建媒体功能查询而不指定值，则只要该功能的值不为零，就会使用嵌套样式。例如，这个CSS将适用于具有彩色屏幕的任何设备：

@media (color) { ... }

如果功能不适用于正在运行浏览器的设备，则涉及该媒体功能的表达式始终为假。例如，嵌套在以下查询中的样式将永远不会被使用，因为没有任何只使用语音的设备具有屏幕高宽比：

@media speech and (aspect-ratio: 11/5) { ... }

有关更多媒体功能示例，请参见参考页对于每个特定的特性。

有时您可能想创建一个取决于多个条件的媒体查询。这时应该让逻辑运算符进来：not，and，和only。而且，您可以将多个媒体查询组合成逗号分隔列表。这使您可以在不同情况下应用相同的样式。

在前面的示例中，我们已经看到了and用于对媒体进行分组的运算符类型与媒体特征...

and运算符还可以将多个媒体特性组合到单个媒体查询中。not运算符否定了媒体查询，基本上颠倒了它的正常含义。

only运算符阻止旧浏览器应用样式。

注意：在大多数情况下，all当没有指定其他类型时，默认使用媒体类型。但是，如果使用notor only运算符，则必须明确指定媒体类型。

该and关键字结合了媒体类型的媒体特征或其它媒体功能。此示例结合了两种媒体功能，将样式限制为宽度至少为30 ems的横向设备：

@media (min-width: 30em) and (orientation: landscape) { ... }

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

@media screen and (min-width: 30em) and (orientation: landscape) { ...  }

当用户设备与各种媒体类型，功能或状态匹配时，可以使用逗号分隔列表来应用样式。例如，如果用户设备的最小高度为680像素，或者是纵向模式下的屏幕设备，则以下规则将应用其样式：

@media (min-height: 680px), screen and (orientation: portrait) { ... }

以上面的例子，如果用户有一个页面高度为800像素的显示器，媒体语句将返回true，因为第一个查询将被应用。同样，如果用户使用肖像模式的智能手机，视口高度为480像素，则第二个查询将应用，媒体语句仍然会返回true。

该not关键字颠倒了整个媒体查询的含义。它只会否定所应用的特定媒体查询。（因此，它不适用于以逗号分隔的媒体查询列表中的每个媒体查询。）not关键字不能用于否定单个功能查询，只能用于整个媒体查询。该not是最后一个在下面的查询计算：

@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) { ... }

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

<link rel="stylesheet" media="only screen and (color)" href="modern-styles.css" />

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18