此页面由 Cloud Translation API 翻译。

全新的自适应设计：组件驱动型环境中的网页设计

在新一代响应式网页设计时代，控制宏布局和微布局。

Una Kravets

当今的响应式设计

目前，当使用“自适应设计”这个术语时，您很可能会考虑在将设计从移动设备尺寸调整到平板电脑尺寸再到桌面设备尺寸时，使用媒体查询来更改布局。

但很快，这种自适应设计的看法可能会被视为使用表格进行页面布局已过时。

基于视口的媒体查询为您提供了一些强大的工具，但工具不够成熟。它们无法响应用户需求，也无法将自适应样式注入组件本身。

您可以使用全局视口信息来设置组件样式，但组件仍然没有自己的样式，而且在我们的设计系统基于组件而非基于页面时，这种方法不起作用。

好消息是，这个生态系统一直在不断变化，而且飞速变化。 CSS 正在演变，自适应设计的新时代即将开启。

我们看到这种情况大约每 10 年发生一次。10 年前，也就是 2010 年到 2012 年左右，我们看到了移动设计和自适应设计方面的巨大变化，以及 CSS3 的出现。

因此，我们可以再次发现，整个生态系统已准备好应对 CSS 发生的一些重大变更。Chrome 和整个网络平台的工程师正在为新一代自适应设计时代进行原型设计、指定设计并开始实施。

这些更新包括基于用户偏好的媒体功能、容器查询，以及针对新屏幕类型（例如可折叠屏幕）的媒体查询。

响应用户、容器和外形规格

响应用户

通过新的用户偏好设置媒体功能，您可以根据用户自己的具体偏好和需求设置 Web 体验的样式。这意味着，借助偏好设置媒体功能，您可以根据用户体验调整用户体验。

这些用户偏好设置媒体功能包括：

prefers-reduced-motion
prefers-contrast
prefers-reduced-transparency
prefers-color-scheme
inverted-colors
等等

偏好设置功能会获取用户在操作系统中设置的偏好设置，这有助于打造更强大、更个性化的 Web 体验，尤其是对于具有无障碍功能需求的用户。

在操作系统中启用无障碍偏好设置

`prefers-reduced-motion`

如果用户针对减少动作设置了操作系统偏好设置，那么在通常情况下，用户在使用计算机时，请求的动画会较少。因此，在使用网页时，他们可能不喜欢华丽的介绍画面、卡片翻转动画、复杂加载器或其他花哨的动画。

借助 prefers-reduced-motion，您在设计网页时就考虑到了减少动作元素，而为没有设置此偏好设置的用户打造动作增强体验。

这张卡片的正反两面都有信息。基准的减少动作效果是通过淡入淡出来显示该信息，而动作增强体验是翻牌。

首选减少动作并不意味着“无动作”，因为动作对于在线传递信息至关重要。相反，您应提供可靠的基准体验，让用户不必进行不必要的移动操作，即可逐步改善用户的体验，而无需遵循这些无障碍功能需求或偏好。

`prefers-color-scheme`

另一个偏好设置媒体功能是 prefers-color-scheme。此功能可帮助您根据用户偏好的主题来自定义界面。无论用户使用的是桌面设备还是移动设备，在其操作系统中，都可以针对浅色、深色主题或自动主题进行偏好设置，这些偏好设置会随着一天中的时段而变化。

如果您使用 CSS 自定义属性设置页面，则交换颜色值非常简单。您可以快速更新颜色主题值（例如 backgroundColor 和 textOnPrimary），以便在媒体查询中动态调整到新主题。

为了更轻松地测试其中一些偏好设置查询，您可以使用 DevTools 进行模拟，而无需每次都打开系统偏好设置。

针对深色主题进行设计

在针对深色主题进行设计时，这不仅仅是反转背景和文本颜色或深色滚动条。有几个注意事项可能尚未意识到。例如，您可能需要降低深色背景上的颜色饱和度，以减少视觉振动。

不要在深色主题中使用鲜艳的饱和色

您可能想要使用元素背景颜色中的光线向前绘制，而不是使用阴影来增加深度和向前绘制元素。这是因为阴影在深色背景上效果欠佳。

Material Design 针对深色主题设计提供了一些很好的指导。

深色主题不仅可以提供更加个性化的用户体验，还可以显著延长 AMOLED 屏幕的电池续航时间。这些是较新高端手机的屏幕，在移动设备中越来越受欢迎。

最初显示此图形的演讲的屏幕截图

2018 年 Android 的一项研究表明，深色主题的功耗可节省多达 60%，具体取决于屏幕亮度和整体界面。这 60% 的统计数据来自于应用界面使用深色主题和浅色主题时，使用深色主题的 YouTube 播放屏幕与屏幕亮度为 100% 的暂停视频进行比较。

您应始终尽可能为用户提供深色主题体验。

响应容器

CSS 中最令人兴奋的新兴领域之一是容器查询，通常也称为元素查询。从基于页面的响应式设计向基于容器的自适应设计转变将对设计生态系统产生什么影响，这一点再怎么强调都不为过。

下面的示例展示了容器查询提供的强大功能。您可以操控卡片元素的任何样式，包括链接列表、字体大小和基于其父级容器的总体布局：

查看 Codepen 演示（在 Canary 中的标志后面）。

此示例展示了两个具有两种不同容器尺寸的相同组件，这两个组件都占用了使用 CSS 网格创建的布局中的空间。每个组件都会适应其唯一的空间配额，并相应地设置自身的样式。

单凭媒体查询无法实现这种程度的灵活性。

容器查询为自适应设计提供了一种动态性更高的方法。这意味着，如果您将此卡片组件放在页面正文部分的边栏、主打部分或网格内，则该组件本身会根据容器（而非视口）拥有其响应信息和大小

这需要 @container at 规则。其运作方式与使用 @media 的媒体查询类似，但 @container 查询父级容器的信息，而不是视口和用户代理。

.card {
  container-type: inline-size;
}

@container (max-width: 850px) {
  .links {
    display: none;
  }

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

首先，在父元素上设置容器。然后，编写一个 @container 查询，使用 min-width 或 max-width 根据容器内的任何元素的大小设置其样式。

上述代码使用了 max-width，并将链接设置为 display:none，并在容器宽度小于 850px 时减小时间字体大小。

容器查询卡片

在此工厂演示网站中，每个产品卡片（包括主打产品的卡片、最近浏览过的商品的边栏以及产品网格）都是完全相同的组件，并使用相同的标记。

查看 Codepen 演示（在 Canary 中的标志后面）。

没有用于创建整个布局的媒体查询，只有容器查询。这样，每个商品卡片都可以转换为适当的布局，以填充其空间。例如，网格使用 minmax 列布局让元素流入其空间，并在空间过于压缩（这意味着达到最小大小）时重新布局网格。

.product {
  container-type: inline-size;
}

@container (min-width: 350px) {
  .card-container {
    padding: 0.5rem 0 0;
    display: flex;
  }

  .card-container button {
    /* ... */
  }
}

当网格中至少有 350px 的空间时，卡片布局会设置为水平方向，即设置为 display: flex，其默认弹性方向为“row”。

由于空间较小，商品卡片会堆叠显示。每个商品卡片都有自己的样式，这是只使用全局样式无法实现的。

将容器查询与媒体查询混合使用

容器查询具有非常多的用例，其中一个就是日历组件。您可以使用容器查询，根据日历活动和其他细分的父级的可用宽度来重新布局它们。

查看 Codepen 演示（在 Canary 中的标志后面）。

此演示容器会查询以更改日历日期和星期几的布局和样式，以及调整预定活动的外边距和字体大小，以使其更好地适应空间。

然后，使用媒体查询来转换整个布局，使其适合较小的屏幕尺寸。此示例展示了将媒体查询（调整全局样式或宏样式）与容器查询（调整容器的子项及其微样式）相结合的功能有多强大。combine

现在，我们可以在同一个界面组件中考虑宏布局和微布局，以便做出一些非常精细的设计决策。

当前使用容器查询

现在，您可以在 Chrome Canary 版中试用这些演示，在 Canary 中，转到 about://flags 并启用 #enable-container-queries 标志。这将为 contain 属性以及 LayoutNG Grid 实现启用 @container、inline-size 和 block-size 值支持。

该标志还会启用相应的 Chrome 开发者工具功能。了解如何在开发者工具中检查和调试容器查询。

作用域样式

为了基于容器查询进行构建，CSS 工作组还正在积极讨论作用域样式，以帮助为组件设置适当的命名空间和避免冲突。

作用域样式支持直通和组件专用样式，以避免命名冲突，许多框架和插件（如 CSS 模块）已经让我们能够在框架内完成此操作。现在，借助此规范，我们可以使用可读的 CSS 为组件以原生方式编写封装样式，而无需调整标记。

/* @scope (<root>#) [to (<boundary>#)]? { … } */

@scope (.tabs) to (.panel) {
  :scope { /* targeting the scope root */ }
  .light-theme :scope .tab { /* contextual styles */ }
}

通过限定作用域，我们可以创建“甜甜圈形状”选择器，在其中指定样式的封装位置，以及在何处打破该作用域样式以引用更具全局性的样式。

例如，一个标签页面板，我们希望标签页获取限定了范围的样式，而标签页中的面板可以获取父样式。

响应设备类型

在谈到自适应设计新时代的话题时，下一个主题是外形规格的转变，以及我们作为网络社区需要进行设计的内容（例如变形屏幕或虚拟现实）的可能性越来越大。

可折叠设备或柔性屏幕以及跨屏设计就是目前外形规格发生变化的一个例子。跨屏是我们正在制定的另一个规范，用于覆盖这些新的外形规格和需求。

在这方面，用于跨屏幕的实验性媒体查询可以为我们提供帮助。它当前的行为方式如下：@media (spanning: <type of fold>)。该演示设置了具有两列的网格布局：一列的宽度为 --sidebar-width，默认为 5rem，另一列为 1fr。在具有一个垂直折叠边的双屏上查看布局时，--sidebar-width 的值会更新为左折叠边的环境值。

:root {
  --sidebar-width: 5rem;
}

@media (spanning: single-fold-vertical) {
  --sidebar-width: env(fold-left);
}

main {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
}

这样即可实现这样一种布局，即边栏（在本例中为导航栏）填充一个折叠边的空间，而应用界面则填充另一个折叠边。这样可以防止界面中出现“折痕”。

您可以在 Chrome 开发者工具模拟器中测试可折叠屏幕，以便直接在浏览器中对屏幕进行调试和原型设计。

总结

除平板电视以外，探索界面设计还是容器查询和作用域样式如此重要的原因。它们让您有机会将页面布局和全局样式以及用户样式中的组件样式隔离，从而实现更具弹性的自适应设计。这意味着，您现在可以使用基于页面的媒体查询来设计宏布局，包括跨屏幕的细微差别。同时，使用微布局对组件进行容器查询，并添加基于用户偏好设置的媒体查询，以根据用户的独特偏好和需求来自定义用户体验。

一个由新的自适应网页构成的圆圈

这是新版自适应广告。

它将宏布局与微布局相结合，最重要的是，将用户的自定义和外形规格考虑在内。

单凭其中任何一项变更，就都会为我们针对 Web 设计应用的方式带来重大转变。但总体而言，它们意味着我们甚至改变了自适应设计的概念。现在，是时候考虑自适应设计了，而不局限于视口尺寸，并开始考虑所有这些新轴，以打造更出色的基于组件的个性化体验。

自适应设计的下一个时代已然到来，您已经开始自行探索它了。

web.dev/learnCSS

目前，如果您想提升 CSS 游戏水平，或者想重温一些基础知识，我们的团队将在 web.dev 上推出完全免费的全新 CSS 课程和参考文档。您可以通过 web.dev/learnCSS 获取该课程。

希望您喜欢本文中介绍下一个自适应设计时代以及相关基本功能的一些基本功能，也希望您和我一样，对这对网页设计的未来意味着什么充满期待。

它为我们这个界面社区带来了巨大的机会，让我们能够拥抱基于组件的样式、新的外形规格，并打造响应用户响应的体验。