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

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

Una Kravets

当今的自适应设计

如今，当您使用“自适应设计”一词时，很可能是在考虑使用媒体查询在调整设计大小（从移动设备尺寸到平板电脑尺寸，再到桌面设备尺寸）时更改布局。

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

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

您可以使用全局视口信息来设置组件的样式，但组件仍然不拥有自己的样式，这在我们的设计系统基于组件而非基于网页时是行不通的。

好消息是，生态系统正在发生变化，而且变化速度相当快。 CSS 正在不断发展，响应式设计的新时代即将到来。

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

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

因此，我们再次发现，生态系统已准备好迎接 CSS 的一些重大变化。Chrome 和整个 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），以在媒体查询中动态调整为新主题。

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

针对深色主题进行设计

在设计深色主题时，不仅要反转背景和文本颜色，还要使用深色滚动条。您可能没有意识到以下几点。例如，您可能需要降低深色背景上色彩的饱和度，以减少视觉振动。

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

您可能希望使用元素 background-color 中的光线来使元素向前突出，而不是使用阴影来创建深度并使元素向前突出。这是因为阴影在深色背景上的效果不太理想。

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 来实现水平布局，该布局的默认 flex-direction 为“row”。

如果空间较小，商品卡片会堆叠在一起。每个商品卡片都会自行设置样式，这仅靠全局样式是无法实现的。

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

容器查询有许多应用场景，其中一个就是日历组件。您可以根据日历活动和其他细分父级的可用宽度，使用容器查询重新布局这些元素。

在 Codepen 上查看演示（在 Canary 中，需要启用标志）。

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

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

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

使用容器查询

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

此标志还会启用相应的 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 社区，我们未来需要设计的内容（例如可变形屏幕或虚拟现实）的日益增长的可能性。

跨度图
此图表来自 Microsoft Edge Explainers。

可折叠或柔性屏幕，以及针对屏幕跨度进行设计，这些都是我们今天看到的设备规格转变的例子。而屏幕跨越是正在开发的另一项规范，旨在满足这些新的设备规格和需求。

实验性的屏幕跨越媒体查询可以帮助我们解决此问题。目前，它的行为如下：@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 DevTools 模拟器中测试可折叠屏幕，以便直接在浏览器中调试和制作跨屏原型。

总结

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

新自适应广告的圆圈

这是新的自适应广告。

它将宏布局与微布局相结合，最重要的是，它还考虑了用户自定义和设备规格。

仅上述任何一项变化就足以对我们设计网页的方式产生重大影响。但结合起来，它们标志着我们在自适应设计概念化方面发生了巨大转变。现在，我们不仅要考虑视口大小，还要开始考虑所有这些新的轴，以便打造更好的基于组件的自定义体验。

响应式设计的下一个时代已经到来，您可以立即开始自行探索。

web.dev/learnCSS

目前，如果您想提升 CSS 水平，或者想复习一些基础知识，我的团队将在 web.dev 上推出全新的完全免费的 CSS 课程和参考资料。您可以通过 web.dev/learnCSS 访问这些内容。

希望您喜欢这篇关于响应式设计新时代的概览，以及随之而来的一些原语。我也希望您和我一样，对这篇概览所预示的未来网页设计感到兴奋。

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