媒体功能

如果没有媒体查询，自适应设计将无法实现。在媒体查询出现之前，我们无法知道用户使用哪种设备访问您的网站。设计者不得不做出假设。这些假设被编码到固定宽度设计或自适应布局中。

不过，随着媒体查询的推出，这一切都发生了变化。设计师首次可以与用户各退一步。设计人员可以调整布局，以适应用户的设备。

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

@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。使用新的 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。如需了解详情，请参阅有关互动性的模块。

用户偏好查询

借助 CSS，您可以与用户协作，确保他们能够以适合自己的方式访问您的内容。在本课中，您学习了如何根据用户设备的尺寸和功能应用不同的 CSS。不过，您也可以根据用户的设置应用不同的 CSS。

深色模式和浅色模式

您可以根据用户对浅色或深色主题的偏好设置做出响应。许多用户将此设置为系统偏好设置。

为界面元素设置配色方案 x

浏览器为滚动条和表单元素等内容提供默认颜色。您可以指定是为 color-scheme: light 的用户使用浅色主题，还是为 color-scheme: dark 的用户使用深色主题。您还可以使用 color-scheme: light dark 指定网页同时支持这两种模式。您可以在 :root 或 html 元素中设置此属性，以设置整个网页的方案，也可以针对特定元素替换此属性。

您还可以为 color-scheme 设置 meta 标记，以便在样式加载之前设置网页的方案。如果您在网页中的某个元素上设置了 color-scheme: normal，则该元素将使用您在此元标记中设置的 color-scheme 值。

<meta name="color-scheme" content="dark light">

prefers-color-scheme 媒体功能

您还可以使用 prefers-color-scheme 的媒体查询，根据用户偏好的颜色主题定义自定义样式。

light-dark

如果您为用户提供浅色和深色主题选项，那么在媒体查询中设置每种颜色可能会显得过于冗长。light-dark() 可让您在单个属性中同时指定这两个值。

如需启用此功能，您需要在相应元素或其某个祖先元素上设置 color-scheme: light dark。您首先设置要在浅色模式下使用的颜色，然后设置要在深色模式下使用的颜色。

h1{
  color: light-dark( var(--text-light), var(--text-dark));
}

如果用户将系统偏好设置设为请求浅色模式，则标题将为黑色。如果用户偏好深色模式，标题将显示为白色。

对比度偏好设置

您的用户可能会发现，高对比度或低对比度的内容更容易阅读，并且可能会设置其系统以使用最适合自己的主题替换您的主题。您的任务是确保网站仍能满足他们的偏好。

您可能还记得，在 Cascade 模块中，!important本地用户样式可以替换网页提供的已编撰样式。这样，用户就可以使用更适合自己的样式。

强制颜色

Windows 提供“对比度主题”，用户可以选择这些主题来替换网站上的主题。这些主题通常具有高对比度，并且可能采用浅色模式或深色模式。在 CSS 中，这称为强制颜色，在大多数情况下，您的网站在此模式下会按预期运行。按钮、链接、输入和其他内容将使用主题的颜色。

有时，您可能需要调整样式，例如，当您以非标准方式使用元素时。您可以使用 @media (forced-colors: active) 媒体查询在用户启用强制颜色时应用样式。

在某些情况下，网站的样式对于理解内容本身至关重要，例如带有颜色选择器或带有颜色键的图表。您可以在元素上设置 forced-color-adjust: none; 以选择退出强制颜色模式。请务必仅针对特定元素选择停用，并检查在强制颜色模式下内容是否仍可访问。

高对比度

部分用户还可以将系统设置为要求提高对比度。您可以使用 prefers-contrast: more 媒体查询来调整响应中的样式。

减少动画效果

您可以使用 prefers-reduced-motion 媒体查询来响应用户对减少动画效果的偏好。此功能通常用于提供替代动画，避免可能引发癫痫、前庭运动障碍或偏头痛敏感症的大动作。如需了解详情，请参阅使用动画时的注意事项。

设计脚本

您的用户可能会在 JavaScript 处于停用状态时访问您的网站，您可以调整 CSS，以便他们仍能使用 scripting 媒体查询访问您的内容。

@media (scripting: none) {
  /* Styles when JavaScript is disabled*/
 }

@media (scripting: initial-only) {
  /* Styles when JavaScript is available only for an initial render, for example with a printed page or server side rendering */
}

@media (scripting: enabled) {
   /* Styles when Javascript is enabled */
}

检验您的掌握情况

测试您对媒体功能的了解程度