为 Chrome 中第三方 Cookie 的停用做好准备。立即测试您的网站是否存在任何服务中断问题。

此页面由 Cloud Translation API 翻译。

媒体功能

概括介绍了媒体功能可让您响应设备和偏好设置的所有方式。

如果没有媒体查询，自适应设计就无法实现。在进行媒体查询之前，我们无法知道用户是通过哪种设备访问您的网站。设计师必须做出假设。这些假设被编码到固定宽度的设计或流动布局中。

随着媒体查询的推出，这一切都已改变。设计师们首次有机会在一半的时间里与人们相见。设计师可以根据人们的设备来调整布局。

请注意，媒体查询包含可选的媒体类型和一项强制性的媒体功能。这些年来，媒体类型没有太大变化。仍然只有四个可能的值：

@media all
@media screen
@media print
@media speech

另一方面，媒体功能则得到极大扩展。设计师现在可以满足除一半以外的用户需求，调整设计以使其适应屏幕尺寸远不止于屏幕尺寸。

浏览器支持

来源

视口维度

到目前为止，网络上最热门的媒体查询都是处理视口宽度的。但即使您在这里，也可以做出选择。您可以使用 max-width 媒体功能应用特定宽度以下的样式，也可以使用 min-width 媒体功能应用超过特定宽度的样式。

main {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 45em) {
  main {
    display: block;
  }
}

@media (min-width: 45em) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

就我个人而言，我喜欢使用 min-width。我以累加的方式应用布局样式。我在每个断点处都引入了新的布局规则，而不是撤消之前的规则。

这种添加方法也适用于高度。使用 min-height，随着视口高度的增加，您可以引入更多规则。例如，如果有足够的垂直空间，您可能希望将标题元素锚定到浏览器窗口顶部。

@media (min-height: 30em) {
  header {
    position: fixed;
  }
}

不过，如果您愿意，也可以使用 max-height 媒体功能。在此例中，默认情况下，标题是锚定的，但如果没有足够的垂直空间，粘性会被移除。

header {
  position: fixed;
}
@media (max-height: 30em) {
  header {
    position: static;
  }
}

在 min- 和 max- 前缀之间选择不仅适用于 width 和 height。aspect-ratio 媒体功能提供相同的选择。如果您想以精确的宽高比应用样式，它还提供了一个无前缀的版本。

@media (min-aspect-ratio: 16/9) {
  // The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
  // The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
  // The ratio of width to height is exactly 16 by 9.
}

针对不同宽高比提供不同的样式可能很快就会失控。如果您不需要这种精细的控制，orientation 媒体功能可能更好地满足您的需求。它有两个可能的值：portrait 或 landscape。

@media (orientation: portrait) {
  // The width is less than the height.
}
@media (orientation: landscape) {
  // The width is greater than the height.
}

虽然“纵向”和“横向”这两个术语最常用来指代移动设备的屏幕方向，但 orientation 的媒体功能并非特定于设备。在典型笔记本电脑上，全屏浏览器窗口的 orientation 值为 landscape。

显示屏

不同的显示屏具有不同的像素密度，以 dpi 为单位，每英寸的点数。您可以使用 resolution 媒体功能针对不同的像素密度调整样式。与 aspect-ratio 一样，resolution 有三个变体：最小、最大和精确。

@media (min-resolution: 300dpi) {
  // The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
  // The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
  // The display has a pixel density of exactly 300 dots per inch.
}

您可能永远不需要使用任何 resolution 媒体查询。像素密度通常只是图片问题，而自适应图片可以直接在 HTML 中处理像素密度。

另一方面，CSS 是用于定义动画和转场效果的位置。您可以使用 update 媒体功能调整这些动画和过渡以响应不同的刷新频率。此媒体功能会报告以下三个值之一：none、slow 和 fast。

update 值为 none 表示没有刷新率。例如，已打印的页面无法更新。

update 值为 slow 表示显示屏无法快速刷新。电子墨水显示屏就是刷新率较低的屏幕的一个示例。

update 值为 fast 表示屏幕刷新速度足够快，能够处理动画和过渡。

@media (update: fast) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

并非显示屏的所有方面都与硬件功能相关。在关于主题设置的单元中，您学习了如何在 Web 应用清单文件中定义属性。其中一个属性称为 display，您可为它指定值 fullscreen、standalone、minimum-ui 或 browser。通过相应的 display-mode 媒体功能，您可以针对这些不同选项定制样式。

假设您在 Web 应用清单中将 display 值设为 standalone。如果有人将您的网站添加到其主屏幕中，则该网站启动时将不会显示任何浏览器界面。您可以决定为这些用户显示返回按钮。

button.back {
  display: none;
}
@media (display-mode: standalone) {
  button.back {
     display: inline;
  }
}

颜色

可用于查询设备颜色功能的媒体功能有很多。如果您想针对仅输出灰色阴影的任何显示屏调整样式，可以使用不带任何值的 monochrome 媒体功能。

@media (monochrome) {
  body {
    color: black;
    background-color: white;
  }
}

有对应的 color 媒体功能。

@media (color) {
  body {
    color: maroon;
    background-color: linen;
  }
}

对于彩色屏幕，您可以使用媒体功能 color-gamut、color-index 或 dynamic-range 编写查询。所有这些控件都会报告有关屏幕颜色功能的具体详情。

在此示例中，颜色值会更新以响应 dynamic-range 媒体功能，该媒体功能会报告显示屏的最大亮度、色深和对比度。可能的值为 standard 或 high。对于报告 dynamic-range 值为 high 的高清屏幕，使用新的 CSS color() 函数为其提供不同的颜色空间。

.neon-red {
  color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
  .neon-red {
    color: color(display-p3 1 0 0);
  }
}

互动

媒体功能还可以报告用于与您的网站互动的输入机制类型：hover、any-hover、pointer 和 any-pointer。如需了解详情，请参阅“交互”单元。

偏好设置

您可以通过一系列媒体查询来满足用户偏好：prefers-color-scheme、prefers-contrast 和 prefers-reduced-motion。如需了解详情，请参阅有关主题设置和无障碍功能的模块。

您可以在一个媒体查询中组合媒体功能。您可以限定动画样式的范围，以便仅在设备的刷新频率较快且用户未表现出对减少动作的偏好时应用这些样式。

@media (update: fast) and (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

媒体功能

视口维度

显示屏

颜色

互动

偏好设置

更多媒体功能

检查您的掌握程度