Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries below:

使用媒体查询 - CSSï¼šå±‚å æ ·å¼è¡¨

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

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

• 有条件的通过 @media 和 @import at 规则用 CSS 装饰样式。
• 用 media= 属性为<style>、<link>、<source>和其他 HTML 元素指定特定的媒体类型。如：

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

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

备注： 本页的例子使用 CSS @media 的方式来说明目的，但是对于所有类型的媒体查询，基本语法均相同。

每条媒体查询语句都由一个可选的媒体类型和任意数量的媒体特性表达式构成。可以使用多种逻辑操作符合并多条媒体查询语句。媒体查询语句不区分大小写。

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

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

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

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

@media screen, print { ... }

有关所有媒体类型的列表，请参见Media types。由于它们仅以非常广泛的术语描述设备，因此只有少数几种可用。要定位更具体的属性，请改用媒体功能。

媒体功能描述了给定的user agent的输出设备或环境的特定特征。例如，你可以将特定样式应用于宽屏显示器，使用鼠标的计算机，或应用于在弱光条件下使用的设备。当用户的主要输入机制（例如鼠标）可以悬停在元素上时，如下为一个示例：

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

许多媒体功能都是范围功能，这意味着可以在它们前面加上“最小”或“最大”来表示“最小条件”或“最大条件”约束。例如，仅当你的浏览器的viewport宽度等于或小于 12450px 时，此 CSS 才会应用样式：

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

如果你在未指定值的情况下创建媒体功能查询，则该样式将全部被应用，只要该查询的值不为零（或在 Level 4 中为none）即可。例如，此 CSS 将适用于任何带有彩色屏幕的设备：

如果某个功能不适用于运行浏览器的设备，则涉及该媒体功能的表达式始终为 false。例如，将不会使用嵌套在以下查询中的样式，因为没有语音专用设备具有屏幕长宽比：

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

有关更多媒体功能media feature示例，请参阅每个特定功能的参考页。

有时你可能想创建一个取决于多个条件的媒体查询。这就是逻辑运算符使用的场景：not，and，和 only。此外，你可以将多个媒体查询合并到一个逗号分隔的列表中。这使你可以在不同情况下应用相同的样式。

在前面的示例中，我们已经看到 and 运算符用于将媒体类型与媒体功能分组。and 运算符还可以将多个媒体功能组合到单个媒体查询中。同时，not 运算符会否定媒体查询，从而基本上颠倒了它的正常含义。only 运算符可防止较早的浏览器应用样式。

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

and关键字将媒体功能与媒体类型或其他媒体功能组合在一起。此示例结合了两种媒体功能，以将样式限制为宽度至少为 30 em 的横向的设备：

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

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

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

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

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

以上面的示例为例，如果用户使用的打印机的页面高度为 800 像素，则 media 语句将返回 true，因为将应用第一个查询。同样，如果用户使用的是纵向模式的智能手机，并且视口高度为 480px，则将应用第二个查询，并且 media 语句仍将返回 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关键字可防止不支持带有媒体功能的媒体查询的旧版浏览器应用给定的样式。它对现代浏览器没有影响。

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

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

备注： 媒体查询 4 级规范在现代浏览器中具有合理的支持，但某些媒体功能并未得到很好的支持。有关更多详细信息，请参见 @media browser compatibility table。

@media (max-width: 30em) { ... }

在媒体查询 4 级规范可以这样写：

@media (width <= 30em) { ... }

使用min-和max-可以测试一个在两个值之间的宽度

@media (min-width: 30em) and (max-width: 50em) { ... }

用 4 级语法书写如下

@media (30em <= width <= 50em ) { ... }

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

在媒体功能周围使用not()会否定查询中的该特性。例如，如果设备没有悬停功能，则not(hover)将被匹配：

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

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

@media (not (color)) or (hover) { ... }

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4