带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（27）https://developer.aliyun.com/article/1340866?groupCode=taobaotech
响应外形的需求
新一代响应式Web设计除了响应用户需求，容器需求之外，还有另一个响应需求，那就是外形的响应需求。什么是外形响应需求呢？
折叠设备在市场上已经存在了近三年，你可能已经接触过像下图这样的一些设备：
大致主要分为两种类型，双屏可折叠设备（如 Microsoft Surface Duo）和单屏可折叠设备（如 Huawei Mate XS）：
在多屏幕或可折叠设备上，Web应用或Web页面在这些设备上的打开姿势也将会有所不同，应用可以单屏显示，也 可以跨屏显示：
换句话说，我们的应用或页面要具备这种跨越屏幕的能力，也要具备响应这种跨越的能力，以及还可能需要具备逻辑分隔内容的能力等。
可以说，多屏幕或折叠屏设备开启了更广阔的屏幕空间以及用独特的姿势将用户带入到另一个世界。针对于这种设备，除了用户之外，对于UI设计师，用户体验师和Web开发人员都需要重新面临解锁前所未有的Web体验。这也将 是近十年来，Web开发带来最大的变化之一，以及开发人员所要面临的最大挑战之一。
在这里我们针对多屏幕和折叠屏设备的响应，就称之为响应外形的需求。这也是响应式 Web 设计的一部分。
由于可折叠设备相对来说是新型设备，面对这些新型设备时很多开发者并没有做好相应的知识储备，甚至是不知道从何入手。事实上呢？有些Web开发者已经开始在为我们制定这方面的API，除了文章开头提到的三星（Sam- sung）的 @Diego González， 英特尔（Intel Corporation）的 @Kenneth Rohde Christiansen之外还有微软
（Microsoft）的 @Bogdan Brinza、@Daniel Libby和@Zouhir Chahoud。只不过对于Web开发者来说，现在这些制定的规范（CSS相关的特性）和Web API（JavaScript API）还很新，不确定因素过多，甚至差异性也比较大。
到目前为止主要分为两个部分。其中一个部分是《可用于双屏幕和折叠屏的WebAPI》（地址：https://ww- w.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-pos- ture/），它更适用于“无缝”的折叠设备。
@argyleink在Github上发起了一个使用CSS媒体特性来检测折叠屏的讨论（地址：https://github.com/w3c/css- wg-drafts/issues/4141）。也就是说，Web开发者可以使用@media相关的特性来识别折叠屏，为折叠屏的类型
（比如“有缝”和“无缝”）提供相应的媒体查询。
带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（29）https://developer.aliyun.com/article/1340864?groupCode=taobaotech
