感谢您关注 Google I/O 大会！观看点播内容。

此页面由 Cloud Translation API 翻译。

媒体功能

总结了媒体功能可让您对设备和偏好设置做出响应的所有方式。

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

随着媒体查询的引入，这一切都发生了变化。设计师首次可以与用户达成共识。设计师可以调整布局，以适应用户的设备。

请注意，媒体查询由可选媒体类型和必需媒体功能组成。这些年来，媒体类型没有太大变化。仍然只有四个可能的值：

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

另一方面，媒体功能大大扩展了。设计师现在可以为用户提供更贴心的体验，不仅仅是根据屏幕尺寸调整设计。

Browser Support

Source

视口尺寸

到目前为止，网络上最常见的媒体查询是与视口宽度相关的查询。但即使在这种情况下，您也拥有选择权。您可以使用 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。如需了解详情，请参阅有关互动的模块。

偏好设置

您可以使用一系列媒体查询来响应用户偏好：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%);
  }
}

媒体功能

视口尺寸

显示屏

颜色

互动

偏好设置

更多媒体功能

检查您的理解情况