媒体功能

bookmark_border 通过集合保持井井有条 根据您的偏好保存内容并对其进行分类。

媒体功能让您响应设备和偏好的所有方式的汇总。

如果没有媒体查询，自适应设计将不可能实现。在媒体查询出现之前，没有办法知道人们使用什么类型的设备来访问您的网站。设计人员必须做出假设。这些假设被编码到固定宽度的设计或流动布局中。

这一切都随着媒体查询的引入而改变。设计人员第一次可以与人们走到一半。设计人员可以调整他们的布局以响应人们的设备。

请记住，媒体查询包含一个可选的媒体类型和一个强制性的媒体功能。多年来，媒体类型没有太大变化。仍然只有四个可能的值

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

媒体功能另一方面，已经大大扩展。设计人员现在可以超越一半地满足用户，使设计适应远不止屏幕尺寸。

视口尺寸

到目前为止，Web 上最流行的媒体查询是处理视口宽度的查询。但即使在这里，您也面临一个选择。您可以使用 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.
}

即使术语“portrait”和“landscape”最常用于指代移动设备的方向，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。使用新的 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 的媒体功能将允许用户指定他们正在使用按流量计费的连接，以便您可以发送更小或更少的资源。

其他提案仍在制定中。在下一个也是最后一个模块中，您将了解一个处理不同屏幕配置的媒体功能的提案。

检查您的理解情况

测试您对媒体功能的知识