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

在自适应网页设计的新时代，控制宏观和微观布局。

Una Kravets

当今的自适应设计

如今，当您使用“自适应设计”一词时，您很可能会考虑使用媒体查询来更改布局，以便将设计从移动设备尺寸调整为平板电脑尺寸，再调整为桌面设备尺寸。

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

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

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

好消息是，生态系统正在发生变化，而且变化非常迅速。 CSS 正在不断发展，自适应设计的新时代即将到来。

我们发现，这种情况大约每 10 年发生一次。10 年前，大约在 2010 年至 2012 年期间，我们见证了移动设备和自适应设计的巨大变革，以及 CSS3 的兴起。

CSS 样式时间轴
来源：Web Design Museum。

因此，生态系统已经准备好迎接 CSS 的一些重大变化。Chrome 和整个 Web 平台上的工程师正在为下一个自适应设计时代进行原型设计、规范制定和实现。

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

根据用户、容器和设备规格自适应调整

响应用户

借助新的用户偏好媒体功能，您可以根据用户的特定偏好和需求，打造符合其需求的 Web 体验。这意味着，偏好媒体功能可让您根据用户的体验调整用户体验。

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

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

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

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

prefers-reduced-motion

如果用户在操作系统偏好设置中选择了减少动画，则表示他们希望在日常使用电脑时减少动画效果。因此，他们可能不希望在浏览网页时看到花哨的介绍屏幕、卡片翻转动画、复杂的加载器或其他花哨的动画。

借助 prefers-reduced-motion，您可以在设计网页时考虑减少动画，并为未设置此偏好设置的用户打造动画增强型体验。

此卡片正反两面都有信息。基准减弱动态效果体验是淡入淡出以显示该信息，而增强动态效果体验是卡片翻转。

“prefers-reduced-motion”不应表示“无动画”，因为动画对于在线传达信息至关重要。相反，应提供可靠的基准体验，在没有不必要移动的情况下引导用户，并为没有这些无障碍需求或偏好的用户逐步增强该体验。

prefers-color-scheme

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

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

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

针对深色主题进行设计

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

请勿在深色主题中使用鲜艳、饱和的颜色

您可能希望使用元素背景颜色中的光线来突出显示元素，而不是使用阴影来创建深度并突出显示元素。这是因为阴影在深色背景上效果不佳。

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;
  }

  /* ... */
}

首先，在父元素上设置 containment。然后，编写 @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（默认 flex-direction 为“row”），从而变为水平布局。

如果空间较小，商品卡片会堆叠。每个商品卡片都会自行设置样式， 而仅使用全局样式是无法做到这一点的。

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

容器查询有很多应用场景，其中之一就是日历组件。您可以使用容器查询，根据父级的可用宽度重新布局日历活动和其他片段。

在 Codepen 上查看演示（在 Canary 中，位于标志后面）。

此演示包含查询，用于更改日历的日期和星期几的布局和样式，以及调整预定活动的边距和字号，使其更好地适应空间。

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

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

立即使用容器查询

现在，您可以在 Chrome Canary 中通过一个 flag 体验这些演示。在 Canary 中前往 about://flags，然后开启 #enable-container-queries 标志。 这将为 contain 属性启用对 @container、inline-size 和 block-size 值的支持，并启用 LayoutNG 网格实现。

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

作用域样式

如需基于容器查询进行构建，请使用具有 @scope 的作用域样式来限制选择器的覆盖范围。

作用域样式示意图
图表最初由 Miriam Suzanne 设计。

作用域样式允许针对特定组件进行样式设置，以避免命名冲突，许多框架和插件（如 CSS 模块）已经允许我们在框架内执行此操作。借助作用域样式，您可以为具有可读 CSS 的组件原生编写封装样式，而无需调整标记。

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

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

通过限定范围，您可以创建“甜甜圈形”选择器，在其中指定上限和下限。@scope 规则中包含的选择器会在这些限制之间进行匹配。

例如，在标签页面板中，您可能希望标签页应用作用域样式，但这些标签页内的面板不受这些作用域样式的影响。

自适应设备规格

在关于自适应设计新时代的对话中，下一个主题是外形规格的变化，以及作为 Web 社区，我们需要设计的可能性越来越大（例如变形屏幕或虚拟现实）。

Spanning 示意图
图表来自 Microsoft Edge 说明。

可折叠或柔性屏幕，以及针对跨屏显示进行设计，就是我们今天可以看到的外形规格转变的一个例子。跨屏是另一项正在制定的规范，旨在满足这些新的设备规格和需求。

用于跨屏的实验性媒体查询可以帮助我们实现此目的。目前，其行为如下：@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.dev/learnCSS

目前，如果您想提升 CSS 技能，或者想重温一些基础知识，我的团队正在 web.dev 上推出一门全新的、完全免费的 CSS 课程和参考资料。您可以通过 web.dev/learnCSS 访问。

希望您喜欢这篇关于自适应设计新时代的概览，以及随之而来的一些基元，也希望您和我一样，对这对 Web 设计的未来意味着什么感到兴奋。

这为我们 UI 社区带来了巨大的机遇，让我们能够采用基于组件的样式、新的设备规格，并打造可响应用户操作的体验。