在新响应式 Web 设计时代中控制宏布局和微布局。
当今的响应式设计
今天，当使用术语“响应式设计”时，您很可能想到的是使用媒体查询在将设计从移动设备尺寸调整为平板电脑尺寸，再到桌面设备尺寸时更改布局。
但是很快，对响应式设计的这种看法可能会被认为像使用表格进行页面布局一样过时。
基于视口的媒体查询为您提供了一些强大的工具，但缺乏很多精细度。它们缺乏响应用户需求的能力，以及将响应式样式注入组件本身的能力。
您可以使用全局视口信息来设置组件的样式，但它们仍然不拥有自己的样式，当我们的设计系统是基于组件而不是基于页面时，这就行不通了。
好消息是，生态系统正在改变，而且变化非常迅速。CSS 正在发展，响应式设计的新时代即将到来。
我们大约每 10 年就会看到这种情况发生一次。10 年前，大约在 2010-2012 年，我们看到了移动设备和响应式设计的巨大变化，以及 CSS3 的兴起。
因此，生态系统再次准备好对 CSS 进行一些相当大的更改。Chrome 和整个 Web 平台的工程师正在为响应式设计的下一个时代进行原型设计、规范制定和开始实施。
这些更新包括基于用户偏好的媒体功能、容器查询以及用于新型屏幕（如可折叠屏幕）的媒体查询。
响应用户
新的用户偏好媒体功能使您能够设计与用户自身特定偏好和需求相符的 Web 体验。这意味着偏好媒体功能允许您使您的用户体验适应您用户的体验。
这些用户偏好媒体功能包括
prefers-reduced-motionprefers-contrastprefers-reduced-transparencyprefers-color-schemeinverted-colors- 以及更多
偏好功能会获取用户在其操作系统中设置的偏好，并有助于构建更强大和个性化的 Web 体验，特别是对于那些有无障碍需求的人。
prefers-reduced-motion
已设置操作系统首选项以减少动态效果的用户，通常在使用计算机时会请求减少动画。因此，他们在使用 Web 时可能不会欣赏花哨的介绍屏幕、卡片翻转动画、复杂的加载器或其他花哨的动画。
使用 prefers-reduced-motion，您可以设计考虑了减少动态效果的页面，并为那些没有设置此偏好的用户创建增强动态效果的体验。
此卡片的两面都有信息。基准的减少动态效果体验是淡入淡出以显示该信息，而增强动态效果的体验是卡片翻转。
Prefers-reduced-motion 不应意味着“无动态效果”，因为动态效果对于在线传达信息至关重要。相反，提供一个坚实的基准体验，在没有不必要的移动的情况下引导您的用户，并为没有这些无障碍需求或偏好的用户逐步增强该体验。
prefers-color-scheme
另一个偏好媒体功能是 prefers-color-scheme。此功能可帮助您自定义 UI 以适应用户偏好的主题。在他们的操作系统中，无论是在桌面设备还是移动设备上，用户都可以设置浅色、深色或自动主题的偏好，这些主题会根据一天中的时间而变化。
如果您使用 CSS 自定义属性设置页面，则交换颜色值会变得很简单。您可以快速更新您的颜色主题值，例如 backgroundColor 和 textOnPrimary，以在媒体查询中动态调整为新主题。
为了更轻松地测试其中一些偏好查询，您可以使用 DevTools 进行模拟，而不是每次都打开系统偏好设置。
为深色主题设计
为深色主题设计时，不仅仅是反转背景和文本颜色或深色滚动条。您可能没有意识到一些注意事项。例如，您可能需要在深色背景上降低颜色的饱和度，以减少视觉振动。
您可能希望在元素的 background-color 中使用光线来将元素向前拉，而不是使用阴影来创建深度并将元素向前拉。这是因为阴影在深色背景上不会那么有效。
深色主题不仅提供更定制化的用户体验，而且还可以显着提高 AMOLED 屏幕的电池续航时间。这些是我们在新一代高端手机中看到的屏幕，并且它们在移动设备中变得越来越流行。
2018 年 Android 关于深色主题的研究表明，根据屏幕亮度和整体用户界面，功耗最多可节省 60%。60% 的统计数据来自比较 Youtube 播放屏幕与暂停视频在 100% 屏幕亮度下使用深色主题的应用程序 UI 与浅色主题。
您应该始终尽可能为您的用户提供深色主题体验。
响应容器
CSS 中最令人兴奋的新兴领域之一是容器查询，也经常称为元素查询。从基于页面的响应式设计到基于容器的响应式设计的转变将对设计生态系统的发展产生什么影响，这很难低估。
这是一个容器查询提供的强大功能的示例。您可以根据其父容器操纵任何卡片元素的样式，包括链接列表、字体大小和整体布局
此示例显示了两个相同的组件，它们具有两个不同的容器大小，都占据了使用 CSS Grid 创建的布局中的空间。每个组件都适合其独特的空间分配，并相应地设置自身样式。
这种程度的灵活性是仅使用媒体查询无法实现的。
容器查询为响应式设计提供了更动态的方法。这意味着，如果您将此卡片组件放在侧边栏或标题部分，或页面主体内的网格中，则组件本身拥有其响应式信息，并根据容器而不是视口调整大小
这需要 @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 时减小时间字体大小。
容器查询卡片
在此演示植物网站中，每个产品卡片，包括标题中的卡片、最近查看过的项目侧边栏和产品网格中的卡片，都是完全相同的组件，具有相同的标记。
没有使用媒体查询来创建整个布局，只有容器查询。这允许每个产品卡片转移到适当的布局以填充其空间。例如，网格使用 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”。
在空间较小时，产品卡片会堆叠起来。每个产品卡片都自行设置样式，这在仅使用全局样式的情况下是不可能的。
将容器查询与媒体查询混合使用
容器查询有很多用例，其中之一是日历组件。您可以使用容器查询来根据其父级的可用宽度重新布局日历事件和其他段。
此演示容器查询用于更改日历的日期和星期几的布局和样式，以及调整计划事件的边距和字体大小，以帮助它们更好地适应空间。
然后，使用媒体查询来为较小的屏幕尺寸移动整个布局。此示例显示了结合媒体查询（调整全局或宏样式）与容器查询（调整容器的子项及其微样式）是多么强大。
因此，现在我们可以考虑同一 UI 组件中的宏布局和微布局，以便做出一些非常精细的设计决策。
今天使用容器查询
这些演示现在可以在 Chrome Canary 中的标志后面进行试用。转到 Canary 中的 about://flags 并启用 #enable-container-queries 标志。这将启用对 @container、inline-size 和 block-size 值的支持，用于 contain 属性和 LayoutNG Grid 实现。
该标志还启用了相应的 Chrome DevTools 功能。了解如何在 DevTools 中检查和调试容器查询。
作用域样式
为了构建容器查询，请使用 带有 @scope 的作用域样式来限制选择器的范围。
作用域样式允许组件特定的样式，以避免命名冲突，许多框架和插件（如 CSS 模块）已经使我们能够在框架内执行此操作。作用域样式允许您为组件以可读的 CSS 原生地编写封装样式，而无需调整标记。
/* @scope (<root>#) [to (<boundary>#)]? { … } */
@scope (.tabs) to (.panel) {
:scope { /* targeting the scope root */ }
.light-theme :scope .tab { /* contextual styles */ }
}
作用域允许您创建“甜甜圈形”选择器，您可以在其中指定上限和下限。包含在 @scope 规则中的选择器在这些限制之间匹配。
这方面的一个示例是选项卡面板，您希望选项卡获得作用域样式，但这些选项卡内的面板不受这些作用域样式的影响。
响应外形
我们关于响应式设计新时代的对话中的下一个主题是外形尺寸的变化，以及作为 Web 社区，我们需要为之设计（例如，变形屏幕或虚拟现实）的不断增长的可能性。
可折叠或柔性屏幕以及为屏幕跨越而设计是我们可以看到今天外形尺寸转变的一个例子。而屏幕跨越是另一个正在开发以涵盖这些新外形尺寸和需求的规范。
用于屏幕跨越的实验性 媒体查询 可以帮助我们。它目前的行为如下：@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;
}
这启用了一种布局，其中侧边栏（在本例中为导航）填充其中一个折叠的空间，而应用程序 UI 填充另一个折叠的空间。这可以防止 UI 中出现“折痕”。
您可以在 Chrome DevTools 模拟器中测试可折叠屏幕，以帮助直接在浏览器中调试和原型设计屏幕跨越。
结论
探索平面屏幕之外的 UI 设计是容器查询和作用域样式如此重要的另一个原因。它们让您有机会将组件样式与页面布局和全局样式以及用户样式隔离，从而实现更具弹性的响应式设计。这意味着您现在可以使用基于页面的媒体查询（包括屏幕跨越细微差别）来设计宏布局。同时，在组件上使用带有容器查询的微布局，并添加基于用户偏好的媒体查询，以根据用户的独特偏好和需求自定义用户体验。
这就是新的响应式设计。
它将宏布局与微布局相结合，最重要的是，它考虑了用户自定义和外形尺寸。
这些变化中的任何一个都将构成我们为 Web 设计方式的重大转变。但结合起来，它们标志着我们甚至概念化响应式设计方式的真正巨大转变。现在是时候超越视口大小来考虑响应式设计，并开始考虑所有这些新的维度，以获得更好的基于组件和自定义的体验。
响应式设计的下一个时代已经到来，您现在就可以开始自己探索它。
web.dev/learnCSS
现在，如果您想提升您的 CSS 技能，并可能重新回顾一些基础知识，我的团队正在 web.dev 上推出一个全新的、完全免费的 CSS 课程和参考资料。您可以通过 web.dev/learnCSS 访问它。
我希望您喜欢这篇关于响应式设计下一个时代的概述，以及随之而来的一些原语，并且我也希望您像我一样对这对 Web 设计的未来意味着什么感到兴奋。
它为我们 UI 社区开启了一个巨大的机会，让我们拥抱基于组件的样式、新的外形尺寸，并创建用户响应式体验。