媒体功能

媒体功能让您能够对各种设备和 偏好设置。

如果没有媒体查询，就无法实现自适应设计。在发布媒体查询之前，无法了解用户使用哪种设备访问您的网站。设计师必须做出假设。这些假设被编码为固定宽度的设计或流动布局。

随着媒体查询的引入，这一切都改变了。这是有史以来第一次，设计师可以在半路上与人相识。设计师可以调整其布局，以根据用户的设备做出调整。

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

@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 表示屏幕无法快速刷新。例如，E-ink 显示屏就是刷新频率较低的屏幕。

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。使用新的 CSS color() 函数为报告 dynamic-range 值为 high 的高清屏幕指定不同的颜色空间。

.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%);
  }
}

更多媒体功能

我们还将推出更多媒体功能，敬请期待。

forced-colors 和 inverted-colors 媒体功能会报告设备使用的是受限调色板还是反色调色板。

借助 scripting 媒体功能，您可以根据 JavaScript 的可用性调整 CSS。

一项名为 prefers-reduced-data 的媒体功能可让用户指定自己使用的是按流量计费的网络，以便您发送更少或更少的资源。

其他提案仍在制定中。在下一单元（也是最后一个单元）中，您将了解一项用于处理不同屏幕配置的媒体功能提案。

检查您的理解情况

测试您对媒体功能知识的掌握情况