有用的 CSS 媒体查询功能

2025-05-25

有用的 CSS 媒体查询功能

典型的媒体查询由一个媒体类型（屏幕、打印、语音等）和一个或多个涉及媒体特性的表达式组成，这些表达式的解析结果为 true 或 false。
如果媒体查询中指定的媒体类型与文档显示的设备类型匹配，并且媒体查询中的所有表达式都为 true，则查询结果为 true。当媒体查询结果为 true 时，将应用相应的样式。

注意：如果没有指定媒体类型，则默认为all类型，即相应的样式将适用于所有设备。

媒体功能

媒体特性描述了用户代理和文档显示设备的具体特性。这些特性是可选的。

以下是我遇到的一些有用的媒体功能-

1. 长宽比

纵横比是视口的宽度与高度的比率。

/* Exact aspect ratio */
@media (aspect-ratio: 2/1) {
    ...
}

/* Minimum aspect ratio */
@media (min-aspect-ratio: 16/9) {
 ...
}

/* Maximum aspect ratio */
@media (max-aspect-ratio: 8/5) {
    ...
}
Enter fullscreen mode Exit fullscreen mode

这是一个使用长宽比的实际例子 -

img {
    display: block;
    margin: auto;
    width: 100vw;
    height: calc((9/16)*100vw);
}

@media (min-aspect-ratio: 16/9) {
    img {
        height: 100vh;
        width: calc((16/9)*100vh);
    }
}
Enter fullscreen mode Exit fullscreen mode

查看工作演示。增加/减少窗口的高度以查看其效果。

2. 方向

有两个方向值-

  • portrait：视口处于纵向，即高度大于或等于宽度。

  • landscape：视口处于横向，即宽度大于高度。


@media (orientation: landscape) {
    /* landscape styles */
}

@media (orientation: portrait) {
    /* portrait styles */
}
Enter fullscreen mode Exit fullscreen mode

此媒体功能有助于响应式设计。我们可以将其与其他媒体功能（例如宽度和高度）一起使用。

@media screen and (min-height: 640px) and (orientation: portrait) { 
    ...
}
Enter fullscreen mode Exit fullscreen mode

3.display-mode

display-mode 用于测试应用程序的显示模式。根据规范，共有 4 种类型。它是 Web 应用清单规范的一部分。
无论是否存在 Web 应用清单，该功能查询都将适用。

请参阅本文，了解其实际用途——打造全屏体验

4. hover，any-hover和any-pointer

hover：悬停 CSS 媒体功能可用于测试用户的主要输入机制是否可以悬停在元素上。

我发现使用此功能很有用，可以避免触摸设备在长按悬停元素时模拟悬停状态的情况。

@media (hover: hover) {
  a:hover {
    background: blue;
  }
}
Enter fullscreen mode Exit fullscreen mode

any-hover：这将检查任何可用的输入是否可以悬停在元素上。

any-pointer：检查用户是否有任何指点设备（鼠标、触控笔），如果有，则检查其准确度。准确度用 - 、、
来衡量。finecoarsenone

关于这个话题的一篇非常棒的文章——
触摸设备不应该以尺寸来判断

5.宽度和高度

这两个是非常常用的媒体功能，是响应式网页必不可少的一部分。

/* Exact width */
@media (width: 360px) {
  body {
    ...
  }
}

/* Maximum width */
@media (max-width: 768px) { 
  body {
   ...
}

/* Minimum width */
@media (min-width: 992px) { 
  body {
    ...
  }
}

/* Exact height */
@media (height: 360px) {
  body {
    ...
  }
}

/* Minimum height */
@media (min-height: 640px) {
  body {
    ...
  }
}

/* Maximum height */
@media (max-height: 768px) {
  body {
    ...
  }
}

/* All the values can also be in rem, em, vw, vh */
Enter fullscreen mode Exit fullscreen mode

6.prefers-color-scheme

此功能已在媒体查询级别 5 中引入。全面实现后将会非常有用！
此功能用于检测用户是否已请求其系统使用浅色或深色主题。之前我写过关于使用环境光在网站上启用暗色模式的文章，如果环境光 API 不可用，此功能可以作为补充。

查看媒体查询级别 5 中引入的其他功能。

编辑：正如这里指出的，根据caniuse，它在 safari 的技术预览版中可用。

这些是我发现的一些有用的媒体功能。还有其他一些功能，例如resolution，update等等。完整列表可以在MDN 上找到。

如果您遇到任何其他鲜为人知的媒体功能及其用例，请告诉我！

文章来源：https://dev.to/ananyaneogi/useful-css-media-query-features-o7f
Devto 翻译
PREV
我如何成为 AWS 认证开发人员 - 如何通过助理考试！
NEXT
使用 React 学习 TypeScript - 第一部分