带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（3）https://developer.aliyun.com/article/1340895?groupCode=taobaotech
未来我们应该这样，随着访问网页的设备增加我们不会为每个设备单独设计，而只会做一份设计，把每个设备作为这份设计要照顾的一个方面。
也就是说，每个设备上都会去追求最佳的用户体验，设计会自动适应各个设备。在过去的时代，设计师精确的知道自己的媒介材质，比如一张 A4 纸张，一个名片，或者一张海报。但是在我们这个多屏时代，Web 设计必须有这样的思维，我们要为“任意尺寸”而去设计。
自 Ethan Marcotte 提出响应式Web设计思路以及基于不同断点（CSS 媒体查询替代JavaScript查询设备屏幕分辨）实现不同终端设备屏幕分辨率布局已有十多年了。大家都说，每十年就会看到一个生态系统迅速的发展，其中CSS 也不另外。尤其是这两年，CSS 新增了很多新的特性，比如大家最为期待的容器查询特性@container、级联分层@layer 以及 CSS作用域 @scope 等。
正如 Una Kravets (@Una) 在2021的Google I/O 大会上的分享（地址：https://io.google/2021/ses- sion/a1760fa3-879a-4e98-a616-994ca8d3aab5/?lng=zh-CN）所说：
随着用户偏好查询、容器查询以及其他设备类型查询的出现（CSS新特性），Web社区即将进入响应式 Web 设计的新时代，并改变我们对其含义的看法。
换句话说，下一代响应式Web设计即将到来，或者说已经来到了我们身边。
响应式Web设计的现状
在聊一下代响应式Web设计之前，我们就要对响应式Web设计的现状有所了解。我们分别从两种不同角色（Web 设计师和Web开发者）的角度来看响应式 Web 设计的现状。
先从 Web 设计师的角色来聊。
时至今日，虽然已是移动终端的天下，但如果要给不同终端提供设计稿的话，Web 设计师还是会依旧为不同的设备终端提供不同的设计稿。比如，为不同的设备视窗尺寸（如手机，平板和桌面端）提供不同的设计稿：
我们来看下简化后的不同版本的设计线框图，如下所示：
在上图中，设计师为卡片（Card）提供了三种不同的 UI 效果。虽然卡片在不同设备视窗下有着不同的UI效果，但他们构成的元素是相同，都有卡片容器、卡片缩略图、卡片标题 和 卡片描述等：
带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（5）https://developer.aliyun.com/article/1340892?groupCode=taobaotech
