在未来，Web设计师给Web开发者投喂的设计稿可能就会像下图这样了：
或许因为容器查询的到来，设计师在设计Web的时候，也可能会做出相应的调整。投喂给Web开发的设计稿也可能会和以往的模式有所差异。那么这个时候，Web开发者就需要具备正确理解设计师的意图了。比如，Web设计师可能在未来的设计中会提供向下图的卡片组件设计：
作为Web开发人员，看到上图设计效果，需要改变以往对设计图意图的理解，不能继续执着于基于视窗尺寸来调整组件UI。
上图是基于视窗的一种开发模式，需要为卡片组件设置不同的类名，并且基于视窗尺寸，在相应的类名下调整卡片组件UI。有了容器特性时，我们可以基于现代的Web布局技术，比如Flexbox或Grid布局，让卡片组件基于其容器来调整其UI：
正如上图所示，可以基于视窗大小采用CSS媒体查询特性，Flexbox或Grid布局等技术改变卡片容器.card__container的大小，从而让卡片组件根据其容器尺寸大小做出相应响应。
拥有一个能根据其父容器尺寸做出响应（UI调整）的组件是非常有用的，正如你看到的，我们可以只构建一个组件，就可以满足不同视窗布局下的设计诉求！
- 容器查询不应该让组件变得复杂化
组件是有由很多个元素组合在一起构成的：
虽然容器查询特性到来，可以让组件根据其容器尺寸来做出响应，但要记住的是，做出响应变化应该要有一个度。如果过度设计的话，对于Web开发人员而言，与其使用容器查询特性来实现UI响应，还不如重新构建一个独立的全新组件。拿用户信息组件（UserProfile）为例，组件内部结构保持不变，或者至少不会增加新的结构，只需稍加调整，比如调整布局就可以实现不同的UI效果，或者让内部元素显示隐藏切换等。在这种情景之中，采用容器查询特性才能显现其魅力：
- 作用域样式
为了完善容器查询特性，CSS 工作组还在积极讨论作用域样式（Scoped Styles）（地址：https://css.oddbird.net/scope/），以帮助为组件提供适当的命名空间来避免冲突。
作用域样式允许传递和特定于组件的样式，以避免命名冲突，许多框架和插件（如CSS模块）已经允许我们在框架内这样做。这个规范现在允许我们用可读的CSS为组件编写本机封装的样式，而无需调整标记。
/* @scope (<root>#) [to (<boundary>#)]? { … } */ @scope (.tabs) to (.panel) { :scope { /* targeting the scope root */ } .light-theme :scope .tab { /* contextual styles */ } }
我自己对作用域样式也了解的不怎么多，所以在这里不做过多阐述，以免错误不断。作用域样式可以通过不同命名空间样式传递给特定的组件，以避免命名冲突。其实在 CSS 中另一个与容器查询同样被受期待的特性，级联分层，即 @layer 也可以用来解决命名冲突，样式冲突的问题。该特性已得到了 Safari 和 Chrome 浏览器支持。如果你对该话题感兴趣的话，可以阅读《初探 CSS 的级联层（@layer）》（地址：https://www.w3cplus.com/css/css-layer.html）一文。
▐ 响应外形的需求
新一代响应式Web设计除了响应用户需求，容器需求之外，还有另一个响应需求，那就是外形的响应需求。
什么是外形响应需求呢？
折叠设备在市场上已经存在了近三年，你可能已经接触过像下图这样的一些设备：
大致主要分为两种类型，双屏可折叠设备（如 Microsoft Surface Duo）和单屏可折叠设备（如 Huawei Mate XS）：
在多屏幕或可折叠设备上，Web应用或Web页面在这些设备上的打开姿势也将会有所不同，应用可以单屏显示，也可以跨屏显示：
换句话说，我们的应用或页面要具备这种跨越屏幕的能力，也要具备响应这种跨越的能力，以及还可能需要具备逻辑分隔内容的能力等。
可以说，多屏幕或折叠屏设备开启了更广阔的屏幕空间以及用独特的姿势将用户带入到另一个世界。针对于这种设备，除了用户之外，对于UI设计师，用户体验师和Web开发人员都需要重新面临解锁前所未有的Web体验。这也将是近十年来，Web开发带来最大的变化之一，以及开发人员所要面临的最大挑战之一。
在这里我们针对多屏幕和折叠屏设备的响应，就称之为响应外形的需求。这也是响应式 Web 设计的一部分。
由于可折叠设备相对来说是新型设备，面对这些新型设备时很多开发者并没有做好相应的知识储备，甚至是不知道从何入手。事实上呢？有些Web开发者已经开始在为我们制定这方面的API，除了文章开头提到的三星（Samsung）的 @Diego González， 英特尔（Intel Corporation）的 @Kenneth Rohde Christiansen之外还有微软（Microsoft）的 @Bogdan Brinza、@Daniel Libby和@Zouhir Chahoud。只不过对于Web开发者来说，现在这些制定的规范（CSS相关的特性）和Web API（JavaScript API）还很新，不确定因素过多，甚至差异性也比较大。
到目前为止主要分为两个部分。其中一个部分是《可用于双屏幕和折叠屏的Web API》（地址：https://www.w3cplus.com/mobile/introducing-dual-screen-foldable-web-apis.html）介绍的相关API，它是由微软（Microsoft）的 @Bogdan Brinza、@Daniel Libby和@Zouhir Chahoud一起制定的，更适用于“有缝”的折叠处设备；另一部分是目前处于W3C规范ED阶段的 屏幕折叠 API（地址：https://w3c.github.io/device-posture/），它更适用于“无缝”的折叠设备。
@argyleink在Github上发起了一个使用CSS媒体特性来检测折叠屏的讨论（地址：https://github.com/w3c/csswg-drafts/issues/4141）。也就是说，Web开发者可以使用@media相关的特性来识别折叠屏，为折叠屏的类型（比如“有缝”和“无缝”）提供相应的媒体查询。
比如，我们可以使用 screen-spanning 这个特性可以用来帮助Web开发人员检测“根视图”是否跨越多个相邻显示区域，并提供有关这些相邻显示区域配置的详细信息。
也可以使用 screen-fold-posture 和 screen-fold-angle 两个媒体查询来对无缝设备进行查询：
还可以使用 horizontal-viewport-segments 和 vertical-viewport-segments 查询视口的数量：
horizontal-viewport-segments 和 vertical-viewport-segments是最新的两个查询特性，它们将替代最初的screen-spanning这个媒体查询特性！
除此之外，还可以通过一些折叠姿势来进行查询：
除了CSS媒体查询之外，还引入了六个新的CSS环境变量，以帮助开发者计算显示区域的几何形状，计算铰链区域被物理特征遮挡的几何形状：
上图中展示的这六个CSS环境变量将替代以前的 env(fold-top)、env(fold-left)、env(fold-width) 和env(fold-height)。
对于Web开发者来说，我们可以像下面这样来使用：
// 有缝折叠 @media (spanning: single-fold-vertical) { // CSS Code... } // 无缝折叠 @media (screen-fold-posture: laptop){ // CSS Code... } // 折叠角度查询 @media (max-screen-fold-angle: 120deg) { // CSS Code... } // 视口数量查询 @media (horizontal-viewport-segments: 2) { // CSS Code... } @media (vertical-viewport-segments: 2) { // CSS Code... }
在现代布局中，将这些媒体查询特性、CSS环境变量和CSS Grid布局结合在一起，就可以很轻易的满足外形响应的需求变化。比如：
:root { --sidebar-width: 5rem; } @media (spanning: single-fold-vertical) { :root { --sidebar-width: env(viewport-segment-left 0 0); } } main { display: grid; grid-template-columns: var(--sidebar-width) 1fr; }
Stephanie 在她的最新博文《Building Web Layouts For Dual-Screen And Foldable Devices》（地址：https://www.smashingmagazine.com/2022/03/building-web-layouts-dual-screen-foldable-devices/）中也向大家提供了一个示例，演示了按屏幕数量（horizontal-viewport-segments: 2）查询的示例（地址：https://www.stephaniestimac.com/demos/smashing-ds-demo/）：
.recipe { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: minmax(175px, max-content); grid-gap: 1rem; } .recipe-meta { grid-column: 1 / 4; } img { grid-column: 1 / 4; } .recipe-details__ingredients { grid-row: 3; } .recipe-details__preparation { grid-column: 2 / 4; grid-row: 3; } @media (horizontal-viewport-segments: 2) { .recipe { grid-template-columns: env(viewport-segment-width 0 0) 1fr 1fr; grid-template-rows: repeat(2, 175px) minmax(175px, max-content); } .recipe-meta { grid-column: 1 / 2; } img { grid-column: 2 / 4; grid-row: 1 / 3; } .recipe-details__ingredients { grid-row: 2; } .recipe-details__preparation { grid-column: 2 / 4; grid-row: 3; } }
上面是从示例中截取的有关于布局的关键代码。最终效果如下：
如果你对多屏或折叠屏这方面技术感兴趣的话，还可以阅读:
- 聊聊安卓折叠屏给交互设计和开发带来的变化
（地址：https://www.w3cplus.com/mobile/mobile-folding.html） - 可折叠Web可能会给我们带来的变化
（地址：https://www.w3cplus.com/mobile/css-foldable-display.html） - 可用于双屏幕和折叠屏的Web API
（地址：https://www.w3cplus.com/mobile/introducing-dual-screen-foldable-web-apis.html） - 折叠屏相关的Web API
（地址：https://www.w3cplus.com/mobile/introducing-dual-screen-foldable-web-apis.html） - Foldable CSS and JavaScript update for web developers
（地址：https://devblogs.microsoft.com/surface-duo/foldable-css-javascript-edge-96/） - Building Web Layouts For Dual-Screen And Foldable Devices
（地址：https://www.smashingmagazine.com/2022/03/building-web-layouts-dual-screen-foldable-devices/）
技术的变革是永无止境的，我们将来要面对的用户终端也绝不会仅现于目前能看到的终端设备和媒介，就好比现在运用于游戏行业的 VR（虚拟现实）和 AR（增强现实）设备。虽然现在 VR 和 AR 用于其他行业的场景还很少见，但我们可以预见，在 VR 和 AR 设备越来越成熟和更多的设备发布之后，我们就能看到 VR 和 AR 就像我们已经看到几十年前的触摸屏设备一样。或许有一天，你设计（或开发）的Web页面或应用就需要能在 VR 和 AR 设备上有一个较好的呈现。
上图来自于《UX Case Study: Metaverse Banking VR / AR Design Concept of the Future》（地址：https://www.theuxda.com/blog/how-online-banking-design-should-work-ux-case-study）一文。UXDA的专业金融用户体验架构师和设计师团队向您介绍第一个混合现实银行概念，包括VR和AR银行设计、平板电脑、可穿戴设备、桌面和移动银行UI / UX。在这里，我想表达的是，未来的响应式 Web 设计要响应的外形需求可能会更丰富，更复杂。
总结
响应式 Web 设计已经将 Web 带到了今天人们所能接触到的每一个连接的屏幕上。Web设计师和创意开发者用创造性的思维、大胆的想法和某种无畏的精神探索、测试和迭代他们的想法，使在线体验更有吸引力、更容易访问和更智能，推动了设计方法的发展。就好比这里所提到的 组件驱动式Web设计。
组件驱动式 Web 设计的到来或者说 CSS 容器查询、作用域样式、级联层控制等特性的出现，这些先进的特性使我们有机会从页面布局、全局样式和用户样式中孤立组件样式，从而实现更具弹性的响应式设计。这意味着你现在可以使用基于页面的媒体查询设计宏观布局，包括多屏或折叠屏的细微差异；同时使用基于容器查询给组件设计微观上布局，并添加基于用户偏好的媒体查询，来实现基于用户的独特偏好和需求的定制化体验。
这就是下一代响应式 Web 设计，也就是 组件驱动式 Web 设计（或开发）。它结合了宏观布局和微观布局，最重要的是，也将用户定制化和尺寸外形都考虑到了。
这些变化中的任何一个都将构成我们对web设计方式的重大转变。但它们结合在一起，意味着我们甚至在概念化响应性设计方面的一个巨大转变。是时候思考不止步于视口大小的响应性设计了，并开始考虑所有这些新方向，来获得更好的基于组件和定制化的体验。
也就是说。如果我们将这些组件驱动的功能纳入设计系统，并从整体上改变我们对待 Web 设计的方式，我们就可以利用这些功能以及更多的功能来改善每一个登陆你网站的访问者的用户体验。我们可以为他们提供真正个性化的体验，提高参与度和转化率，并最终提高用户对你的品牌的感知。
我们不再是为用户群体设计。我们对 "受众"一词的理解将发生变化，因为内容和体验将为一个人而不是许多人的受众而变得高度集中。
组件驱动的响应式 Web 设计将使 Web 真正的可移植，并能适应甚至还没有发明的设备。与其在今天的技术范围内追赶和设计，我们将只为用户设计。
最后，希望文章中提到的概念和技术对你有所帮助。
团队介绍
我们是F(X) Team团队，F(x) Team ，F(x) 指函数 F(x) ，是机器学习中常出现的符号，深度学习的本质也是求 f(x) 的最优解，意味拥有不同特征的成员经过 fx 团队神奇作⽤，不断“训练”，⼀起找到前端智能化团队的最优解。我们致力于前端智能化领域的探索和实践，赋能淘宝、天猫、聚划算等日常与大促（如双 11 ）业务，是淘系前端智能化实践的领路人，也是阿里经济体前端委员会智能化方向的核心团队。我们在 D2C（Design to Code） 领域开放了 Imgcook 平台，逐步释放阿里生态的前端生产力；同时我们也与 Google 的 tensorflow 团队保持长线合作，基于 tfjs-node 之上，开源了我们的前端算法工程框架 Pipcook，引领前端行业向智能化时代迈进。
