CSS媒体查询指南

CSS媒体查询是一种根据特定特性、功能和用户偏好来定位浏览器的技术，然后根据这些特性应用样式或运行其他代码。或许世界上最常见的媒体查询是那些针对特定视口范围并应用自定义样式的查询，它催生了响应式设计的整个理念。

/* 当浏览器宽度至少为600px及以上时 */
@media screen and (min-width: 600px) {
  .element {
    /* 应用一些样式 */
  }
}

除了视口宽度外，我们还可以定位许多其他方面。这可能是屏幕分辨率、设备方向、操作系统偏好，甚至是我们可以查询和用于设置内容样式的一系列其他因素。

想要快速查看基于标准设备（如手机、平板电脑和笔记本电脑）视口的媒体查询列表？请查看我们的代码片段集。

使用媒体查询

媒体查询通常与CSS相关联，但也可以在HTML和JavaScript中使用。

HTML

我们可以通过几种方法直接在HTML中使用媒体查询。

<link> 元素可以直接放在文档中。在这个例子中，我们告诉浏览器我们想要在不同的视口大小下使用不同的样式表：

<link href="all.css" media="all" rel="stylesheet">
<link href="small.css" media="(min-width: 20em)" rel="stylesheet">
<link href="medium.css" media="(min-width: 64em)" rel="stylesheet">
<link href="large.css" media="(min-width: 90em)" rel="stylesheet">
<link href="extra-large.css" media="(min-width: 120em)" rel="stylesheet">
<link href="print.css" media="print" rel="stylesheet">

为什么要这样做？这是一种很好的方法，可以通过将样式分割开来，以适合需要它们的设备下载和提供服务的方式来微调网站的性能。

但需要明确的是，这并不总是能阻止与这些媒体查询不匹配的样式表下载，它只是为它们分配了一个较低的加载优先级。

因此，如果像手机这样的小型屏幕设备访问该网站，它只会下载与它的视口大小匹配的媒体查询中的样式表。但是，如果较大的台式机屏幕出现，它将下载所有样式表，因为它与所有这些查询匹配（在这个特定示例中，减去打印查询）。

这只是<link> 元素。正如我们的响应式图像指南所解释的那样，我们可以在元素上使用媒体查询，这会告知元素浏览器应该从一组图像选项中使用哪个版本的图像。

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174353857438221.png" class="lazy" alt="CSS Media Queries Guide ">

同样，这可以很好地提高性能，因为我们可以为较小的设备提供较小的图像——这大概（但并非总是）是可能受数据计划限制的低功耗设备。

并且我们不要忘记，我们也可以直接在<img src="/static/imghw/default1.png" data-src="cat.png" class="lazy" alt="CSS媒体查询指南" > 元素上使用媒体查询：

<img src="/static/imghw/default1.png" data-src="cat.png" class="lazy" alt="A calico cat with dark aviator sunglasses." srcset="cat-small.png 300w, cat-medium.png 600w, cat-large.png 1200w" sizes="(max-width: 600px) 300px, (max-width: 1200px) 600px, 1200px">

CSS

同样，CSS 是在实际应用中发现媒体查询最常见的地方。它们直接位于样式表中的 @media 规则中，该规则使用浏览器匹配这些条件时的条件来包装元素，以确定何时何地应用一组样式。

/* 宽度在 320px 到 480px 之间的视口 */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .card {
    background: #bada55;
  }
}

也可以对导入的样式表进行范围限定，但作为一般规则，应避免使用 @import，因为它性能较差。

/* 尽可能避免使用 @import！*/

/* 所有屏幕的基本样式 */
@import url("style.css") screen;
/* 纵向（窄）方向屏幕的样式 */
@import url('landscape.css') screen and (orientation: portrait);
/* 打印样式 */
@import url("print.css") print;

JavaScript

我们也可以在 JavaScript 中使用媒体查询！你猜怎么着？它们的工作方式与在 CSS 中非常相似。区别在于？我们首先使用 window.matchMedia() 方法来定义条件。

因此，假设我们希望在浏览器宽度至少为 768px 时将消息记录到控制台。我们可以创建一个调用 matchMedia() 并定义该屏幕宽度的常量：

// 创建一个媒体条件，该条件针对宽度至少为 768px 的视口
const mediaQuery = window.matchMedia('(min-width: 768px)');

然后，当满足该条件时，我们可以触发记录到控制台：

// 创建一个媒体条件，该条件针对宽度至少为 768px 的视口
const mediaQuery = window.matchMedia('(min-width: 768px)');

// 注意 `matches` 属性
if (mediaQuery.matches) {
  console.log('媒体查询匹配！');
}

不幸的是，这只会触发一次，因此如果关闭警报，如果我们更改屏幕宽度并再次尝试而无需刷新，它将不会再次触发。这就是为什么最好使用监听器来检查更新的原因。

// 创建一个条件，该条件针对宽度至少为 768px 的视口
const mediaQuery = window.matchMedia('(min-width: 768px)');

function handleTabletChange(e) {
  // 检查媒体查询是否为真
  if (e.matches) {
    // 然后将以下消息记录到控制台
    console.log('媒体查询匹配！');
  }
}

// 注册事件监听器
mediaQuery.addListener(handleTabletChange);

// 初始检查
handleTabletChange(mediaQuery);

请查看 Marko Ilic 关于“使用 JavaScript 媒体查询”的完整文章，以更深入地了解这一点，包括使用媒体查询与较旧的 JavaScript 方法（绑定 resize 事件监听器，检查 window.innerWidth 或 window.innerHeight 以触发更改）的比较。

### 媒体查询的结构

既然我们已经看到了媒体查询可以在哪里使用的几个示例，那么让我们将它们分解并了解它们实际上在做什么。

@media

@media [media-type] ([media-feature]) {
  /* 样式！*/
}

媒体查询配方中的第一个成分是 @media 规则本身，它是许多 CSS at-rules 之一。为什么 @media 会受到如此关注？因为它针对网站查看所用的媒体的类型、该媒体类型支持的功能以及可以组合以混合和匹配简单和复杂条件的运算符。

媒体类型

@media screen {
  /* 样式！*/
}

我们试图定位什么类型的媒体？在许多（如果不是大多数）情况下，您会在这里看到一个 screen 值，这是有道理的，因为我们试图匹配的许多媒体类型都是带有屏幕连接的设备。

但是屏幕当然不是我们唯一可以定位的媒体类型。我们有一些，包括：

• all：匹配所有设备
• print：匹配在打印预览中查看的文档或任何将内容分解成旨在打印的页面的媒体。
• screen：匹配带有屏幕的设备
• speech：匹配以声音方式读取内容的设备，例如屏幕阅读器。自媒体查询级别 4 以来，这取代了现已弃用的 aural 类型。

要在屏幕上预览打印样式，所有主要浏览器都可以使用 DevTools 模拟打印样式表的输出。其他媒体类型（如 tty、tv、projection、handheld、braille、embossed 和 aural）已被弃用，虽然规范继续建议浏览器识别它们，但它们必须评估为空。如果您正在使用其中一种，请考虑将其更改为现代方法。

媒体特性

一旦我们定义了要匹配的媒体类型，我们就可以开始定义要匹配它的特性了。我们已经查看了许多将屏幕与宽度匹配的示例，其中 screen 是类型，而 min-width 和 max-width 是具有特定值的特性。

但是我们可以匹配的“特性”还有很多很多（很多）！媒体查询级别 5 将媒体特性分为 6 类。

视口/页面特性

显示质量

颜色

交互

视频前缀

规范引用了包括电视在内的用户代理，它们在两个各自具有自身特性的平面上呈现视频和图形。以下特性描述了这些平面。

脚本

用户偏好

已弃用

运算符

媒体查询支持许多编程语言中的逻辑运算符，以便我们可以根据某些条件来匹配媒体类型。@media 规则本身就是一个逻辑运算符，它基本上声明“如果”以下类型和特性匹配，则执行某些操作。

and

但是，如果我们想要定位一定宽度范围内的屏幕，可以使用 and 运算符：

/* 匹配宽度在 320px 和 768px 之间的屏幕 */
@media screen (min-width: 320px) and (max-width: 768px) {
  .element {
    /* 样式！*/
  }
}

or（或逗号分隔）

我们也可以用逗号分隔特性作为使用 or 运算符来匹配不同的特性：

/*
  匹配用户偏好暗模式或屏幕宽度至少为 1200px 的屏幕 */
@media screen (prefers-color-scheme: dark), (min-width: 1200px) {
  .element {
    /* 样式！*/
  }
}

not

也许我们想通过设备不支持或不匹配的内容来定位设备。此声明在设备是打印机且只能显示一种颜色时会移除正文的背景颜色。

@media print and (not(color)) {
  body {
    background-color: none;
  }
}

想要更深入地了解？请查看 DigitalOcean 社区的“CSS 媒体查询：快速参考和指南”，以获取更多遵循媒体查询语法的示例。

你真的需要 CSS 媒体查询吗？

媒体查询是 CSS 工具箱中功能强大的工具，具有令人兴奋的隐藏宝石。但是，如果您适应每种情况的设计，最终会得到一个维护起来过于复杂的代码库，而且，众所周知，CSS 就像一只熊崽：可爱且无害，但当它长大时会吃掉你。

这就是为什么我建议遵循 Ranald Mace 的通用设计理念，即“设计产品以尽可能被所有人使用，而无需进行适应或专门设计。”

在“人人皆可访问”中，Laura Kalbag 解释说，无障碍设计和通用设计之间的差异很细微但很重要。无障碍设计师会为轮椅使用者创建一个大尺寸的门以便进入，而通用设计师会创建一个任何人都可以适应的入口，而不管他们的能力如何。

我知道在网络上谈论通用设计很难，而且听起来几乎是乌托邦式的，但想想看，大约有 150 种不同的浏览器，大约 50 种不同的用户偏好组合，正如我们之前提到的，仅 Android 设备就有超过 24000 种不同且独特的设备。

这意味着至少有 1800 万种可能的情况可能会显示您的内容。用精彩的 Miriam Suzanne 的话来说，“CSS 在这里试图在一个无限且未知的画布上，跨越操作系统、界面和语言来进行未知内容的图形设计。我们没有人可能知道我们在做什么。”

这就是为什么假设非常危险的原因，因此当您设计、开发和考虑您的产品时，请抛开假设，并使用媒体查询来确保您的内容在任何联系人和任何用户面前都能正确显示。

匹配值范围

上一节中概述的许多媒体特性（包括 width、height、color 和 color-index）都可以加上 min- 或 max- 前缀来表示最小或最大约束。我们已经在许多示例中看到了这些用法，但关键是我们可以创建一个值范围来匹配，而不必声明特定值。

在下面的代码片段中，当视口宽度大于 30em 且小于 80em 时，我们将正文的背景颜色设置为紫色。如果视口宽度与该值范围不匹配，则将回退到白色。

body {
  background-color: #fff;
}

@media (min-width: 30em) and (max-width: 80em) {
  body {
    background-color: purple;
  }
}

媒体查询级别 4 指定了一种使用 less than( 和 <code>equals(=) 运算符的新简化语法。因此，最后一个示例可以转换为新的语法，如下所示：

@media (width >= 30em) and (width 
<p></p><h3 id="嵌套和复杂的决策">嵌套和复杂的决策</h3>
<p></p><p>CSS 允许您嵌套 at-rules 或使用括号分组语句，使我们能够深入评估复杂操作。</p>
<pre class="brush:php;toolbar:false">@media (min-width: 20em), not all and (min-height: 40em) {  
  @media not all and (pointer: none) { ... }
  @media screen and ( (min-width: 50em) and (orientation: landscape) ), print and (not (color)) { ... }
}

小心！即使可以创建强大而复杂的表达式，您最终也可能会得到一个非常武断、难以维护的查询。正如 Brad Frost 所说：“我们的界面越复杂，我们就必须付出更多思考才能正确维护它们。”

辅助功能

媒体查询级别 4 中添加的许多功能都集中在辅助功能上。

prefers-reduced-motion

prefers-reduced-motion 检测用户是否启用了减少运动偏好以最大限度地减少移动和动画的数量。它采用两个值：

<code>- no-preference：指示用户没有向系统告知任何偏好。
- reduce：指示用户已通知系统他们更喜欢最大限度地减少移动或动画数量的界面，最好是消除所有非必要的移动。

此偏好通常由患有前庭障碍或眩晕症的人使用，其中不同的运动会导致失去平衡、偏头痛、恶心或听力损失。如果您曾经尝试快速旋转并感到头晕，您就会知道感觉如何。

在 Eric Bailey 的一篇精彩文章中，他建议使用以下代码停止所有动画：

```css
@media screen and (prefers-reduced-motion: reduce) {  
  * {
    /* 非常短的持续时间意味着依赖事件的 JavaScript 仍然有效 */
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}</code>

流行的框架（如 Bootstrap）默认情况下具有此功能。在我看来，没有理由不使用 prefers-reduced-motion——只需使用它即可。

prefers-contrast

prefers-contrast 特性告知用户是否已选择在其系统偏好设置或浏览器设置中增加或减少对比度。它采用三个值：

• no-preference：当用户没有向系统告知任何偏好时。如果您将其用作布尔值，它将评估为 false。
• high：当用户选择显示更高对比度级别时。
• low：当用户选择显示较低对比度级别时。

在撰写本文时，此功能不受任何浏览器支持。Microsoft 使用非标准的早期实现与 -ms-high-contrast 特性一起工作，该特性仅适用于 Microsoft Edge v18 或更早版本（但不包括基于 Chromium 的版本）。

.button {
  background-color: #0958d8;
  color: #fff;
}

@media (prefers-contrast: high) {
  .button {
    background-color: #0a0db7;
  }
}

此示例在用户打开高对比度时，将类 button 的对比度从 AA 提高到 AAA。

inverted-colors

inverted-colors 特性告知用户是否已选择在其系统偏好设置或浏览器设置中反转颜色。有时此选项用作高对比度的替代方案。它采用两个值：

• none：颜色正常显示时
• inverted：当用户选择反转颜色选项时

反转颜色的问题在于它还会反转图像和视频的颜色，使它们看起来像 X 光图像。通过使用 CSS invert 过滤器，您可以选择所有图像和视频并将它们反转回来。

@media (inverted-colors) {
  img, video { 
    filter: invert(100%);
  }
}

在撰写本文时，此功能仅受 Safari 支持。

prefers-color-scheme

如今，我们越来越多地看到“暗模式”配色方案，并且由于 prefers-color-scheme 特性，我们可以利用用户的系统或浏览器偏好设置来确定我们是否应根据其偏好提供“暗”或“亮”主题。

它采用两个值：

• light：当用户选择他们更喜欢浅色主题或没有活动偏好时
• dark：当用户在其设置中选择了深色显示时

body {
  --bg-color: white; 
  --text-color: black;

  background-color: var(--bg-color);
  color: var(--text-color);
}

@media screen and (prefers-color-scheme: dark) {
  body {
    --bg-color: black;
    --text-color: white;
  }
}

正如 Adhuham 在关于暗模式的完整指南中所解释的那样，它不仅仅是更改背景颜色。在开始使用暗模式之前，请记住，如果您没有非常智能的实现策略，最终可能会得到一个非常难以维护的代码库。CSS 变量可以对此产生奇迹，但这将是另一篇文章的主题。

未来展望

媒体查询级别 5 目前处于工作草案状态，这意味着从现在到它成为建议之间可能会发生很多变化。但它包含一些值得一提的有趣功能，因为它们开辟了新的方法来定位屏幕并将设计适应非常具体的条件。

用户偏好媒体特性

嘿，我们刚刚在上节中介绍了这些！好吧。这些特性令人兴奋，因为它们是由用户的实际设置告知的，无论它们来自用户代理还是操作系统级别。

检测强制颜色调色板

这很简洁。某些浏览器会限制可用于呈现样式的可用颜色数量。这称为“强制颜色模式”，如果在浏览器设置中启用，用户可以选择在页面上使用有限的颜色集。因此，用户能够定义颜色组合和对比度，从而使内容更易于阅读。

forced-colors 特性允许我们使用 active 值检测是否正在使用强制颜色调色板。如果匹配，浏览器必须通过 CSS 系统颜色提供所需的调色板。浏览器还可以自行决定页面的背景颜色是浅色还是深色，如果合适，则触发相应的 prefers-color-scheme 值，以便我们可以调整页面。

检测最大亮度、颜色深度和对比度比

某些设备（和浏览器）能够显示超亮显示屏、呈现广泛的颜色范围以及颜色之间的高对比度比。我们可以使用 dynamic-range 特性检测这些设备，其中 high 关键字匹配这些设备，而 standard 匹配所有其他设备。

我们可能会看到对此的更改，因为截至目前，对于构成高亮度和对比度的测量值仍然存在不确定性。浏览器可能会做出该决定。

视频前缀特性

规范讨论了一些屏幕（如电视），它们能够在单独的“平面”上显示视频和图形，这可能是区分视频帧与屏幕上其他元素的一种方式。因此，媒体查询级别 5 提出了一组新的媒体特性，旨在检测视频特性，包括色域和动态范围。

还有关于检测视频高度、宽度和分辨率的建议，但陪审团仍在讨论这些是否是解决视频的正确方法。

浏览器支持

浏览器不断发展，因为当您阅读这篇文章时，此功能的浏览器支持可能会发生变化，请检查 MDN 更新的浏览器兼容性表。

关于容器查询的说明

如果组件可以根据自身大小而不是浏览器的自身大小进行调整，那不是很酷吗？这就是 CSS 容器查询的概念。我们目前只有浏览器屏幕才能通过媒体查询进行这些更改。

这很不幸，因为视口并不总是与元素本身的大小直接相关。想象一下一个在网站上许多不同上下文中呈现的小部件：有时在侧边栏中，有时在全宽度页脚中，有时在具有未知列的网格中。

这就是容器查询试图解决的问题。理想情况下，我们可以根据元素本身的大小而不是视口的大小来调整元素的样式。Chrome 105 发布了对 CSS 容器查询的支持。Safari 16.1 也一样。在撰写本文时，我们真正等待的是 Firefox 获得广泛支持。

此浏览器支持数据来自 Caniuse，其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。

桌面

移动/平板电脑

### 示例

让我们来看一些媒体查询示例。媒体类型、特性和运算符的组合如此之多，我们可以显示的可能性数量将是详尽无遗的。相反，我们将根据特定的媒体特性重点介绍一些。

在不同的视口宽度下调整布局

更多信息

这可能是最广泛使用的媒体特性。它告知浏览器视口的宽度，包括滚动条。它解锁了 Ethan Marcotte 著名的响应式设计的 CSS 实现：一种通过结合流体网格、灵活图像和响应式排版来响应视口大小的设计过程。

后来，Luke Wroblewski 通过引入移动优先一词来发展响应式设计的概念，鼓励设计师和开发人员首先从小型屏幕体验开始，然后随着屏幕宽度和设备功能的扩展逐步增强体验。

移动优先通常可以通过使用 min-width 而不是 max-width 来发现。如果我们从 min-width 开始，我们基本上是在说，“嘿，浏览器，从这里开始向上工作。”另一方面，max-width 就像优先考虑更大的屏幕一样。

一种通过宽度定义断点的方法是使用标准设备的尺寸，例如 iPhone 的精确像素宽度。但是，有很多很多（很多）不同的手机、平板电脑、笔记本电脑和台式机。仅查看 Android，截至 2015 年 8 月，就有超过 24,000 种视口大小、分辨率、操作系统和浏览器的变体。

因此，虽然针对特定设备的精确宽度可能对故障排除或一次性修复有所帮助，但这可能不是维护响应式架构的最可靠解决方案。这绝不是一个新想法。Brad Frost 早在 2013 年发表的帖子“高效媒体查询的 7 个习惯”中就已经在宣扬让内容（而不是设备）决定断点的优点。

即使媒体查询仍然是创建响应式界面的有效工具，但在许多情况下，完全可以避免使用宽度。现代 CSS 允许我们使用 CSS 网格和 flex 创建灵活的布局，这些布局会将我们的内容适应视口大小，而无需添加断点。例如，这是一个网格布局，它会调整它将有多少列，而无需任何媒体查询。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

关于超越宽度的思考有很多文章，几年前我写过这篇文章，我建议查看 Una Kravet 的一篇名为“一行 CSS 中的十种现代布局”的文章。

#### 暗模式

更多信息

此示例直接摘自我们关于网络上暗模式的指南。其思想是，我们可以使用 prefers-color-scheme 特性检测用户的系统设置是否配置为浅色或深色模式，然后为呈现的 UI 定义一组替代颜色。

将此技术与 CSS 自定义属性相结合会使事情变得更容易，因为它们就像我们只需要定义一次，然后在整个代码中使用的变量。需要交换颜色吗？更改自定义属性值，它会在任何地方更新。这正是 prefers-color-scheme 所做的。我们将一组颜色定义为自定义属性，然后在媒体查询中使用 prefer-color-scheme 特性重新定义它们，以根据用户的设置更改颜色。

#### 在响应式卡片库上检测方向、悬停和运动

更多信息

此图库是响应式的，无需使用宽度特性。

它检测视口的方向。如果它是纵向视口，侧边栏将变为标题；如果是横向，它将保留在侧面。

使用 pointer 媒体特性，它决定主要输入设备是粗糙的（如手指）还是精细的（如鼠标光标）来设置复选框的可点击区域的大小。

然后，通过使用 hover 媒体特性，该示例检查设备是否能够悬停（如鼠标光标）并在每张卡片中显示复选框。

当 prefers-reduced-motion 设置为 reduce 时，动画将被移除。

您是否注意到某些内容？我们实际上没有为卡片的实际布局和大小使用媒体查询！这是使用 .container 元素上的 minmax() 函数处理的，以显示响应式设计并不总是意味着使用媒体查询。

简而言之，这是一个完全响应式的应用程序，无需测量宽度或做出任何假设。

#### 定位横向模式下的 iPhone

/* iPhone X 横向模式 */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  /* 样式！*/
}

更多信息

orientation 媒体特性测试设备是向宽方向（横向）旋转还是向高方向（纵向）旋转。

虽然媒体查询无法准确知道正在使用哪个设备，但我们可以使用特定设备的精确尺寸。上面的代码片段针对的是 iPhone X。

#### 为大型视口应用粘性标题

更多信息

在上面的示例中，我们使用 height 来分离固定元素并避免在屏幕太短时占用过多的屏幕空间。当屏幕很高时，水平导航栏处于固定位置，但在较短的屏幕上会分离自身。

与 width 特性一样，height 检测视口的高度，包括滚动条。我们许多人在具有狭窄视口的小型设备上浏览网页，这使得为不同的高度设计比以往任何时候都更重要。Anthony Colangelo 描述了 Apple 如何以有意义的方式使用 height 媒体特性来处理视口高度变化时英雄图像的大小。

#### 响应式（流体）排版

更多信息

字体看起来可能太大或太小，具体取决于显示它的屏幕大小。如果我们在小型屏幕上工作，那么我们很可能想要使用比在更大的屏幕上使用的字体更小的字体。

这里的想法是，我们使用浏览器的宽度来缩放字体大小。我们在 上设置一个默认字体大小，作为“小”字体大小，然后使用媒体查询设置另一个字体大小，作为“大”字体大小。在中间？我们再次设置字体大小，但在另一个媒体查询中，该查询根据浏览器宽度计算大小。

这样做的妙处在于它允许字体大小根据浏览器宽度调整，但永远不会超过或低于特定大小。但是，由于像 min()、max() 和 clamp() 这样的较新的 CSS 功能，有一种更简单的方法可以做到这一点，而无需任何媒体查询。

#### 当设备具有粗指针时提供更大的触摸目标

更多信息

您是否曾经访问过一个具有超小按钮的网站？我们有些人手指粗壮，很难准确地点击一个对象而不会无意中点击其他东西。

当然，我们可以依靠 width 特性来判断我们是否正在处理小型屏幕，但我们也可以检测设备是否能够悬停在元素上。如果不是，那么它可能是一个触摸设备，或者可能是同时支持两种设备的设备，例如 Microsoft Surface。

上面的演示使用复选框作为示例。在小型屏幕上查看复选框时，复选框可能很难点击，因此如果设备无法进行悬停事件，我们将增加大小并且不需要悬停。

同样，这种方法并不总是准确的。请查看 Patrick Lauke 的详尽文章，其中详细介绍了使用 hover、pointer、any-hover 和 any-pointer 时可能出现的问题。

### 规范

• 媒体查询级别 4（候选推荐）
• 媒体查询级别 5（工作草案）

特别感谢 Sarah Rambacher 帮助审查本指南。

以上是CSS媒体查询指南的详细内容。更多信息请关注PHP中文网其他相关文章！