下一代响应式Web设计： 组件驱动式Web设计
作者：大貘
出品：大淘宝技术
自从著名设计师 Ethan Marcotte（@beep）在 A List Apart上发表了一篇名为《 Responsive Web Design》的文章之后，响应式网页设计（RWD，即 Responsive Web Design）的身影就出现在了公众面前。自此就有了响应式 Web 设计这个概念。从提出这个概念到今天已经有十多年的时间了。在这十多年来，CSS 也发生了巨大的变化，新增了很多新的特性，近两年尤其如此，近两年尤其如此（详细请参阅《2022 年的 CSS》一文）。这些变化，对于响应式Web设计的开发也有较大的改变。Una Kravets（@Una）大神，在2021的Google I/O 大会上的分享，提出 新的响应式：组件驱动式 Web 设计。Web 生态即将进入响应式 Web 设计的新时代，并转变我们对其含义的看法，也为会Web设计带来新的变化。组件式驱动 Web 设计（或开发）也被称为是下一代响应式 Web 设计（或开发）。如果你对这方面话题感兴趣的话，请继续往下阅读。
文章链接：
- 《 Responsive Web Design》（地址：https://alistapart.com/article/responsive-web-design/）
- 《2022 年的 CSS》（地址：https://www.w3cplus.com/css/what-is-new-css-in-2022.html）
- 《新的响应式：组件驱动式Web 设计》（地址：h ttp s ://io.g oogle /20 21/ses s io n/a1 760 - fa3-879a-4e98-a616-994ca8d3aab5/?lng=zh-CN）
响应式Web设计的发展历程
既然要聊响应式Web设计，那么我们就花一点篇幅和时间简单地了解一下其发展历程。
众所周知，自从 Tim Berners-Lee 创建第一个 Web页面（大约在1991年8月份左右）到90年代末，Web页面都是非常简陋的：
直到90年代末20年代初，Web设计和用户体验随着 CSS 的到来才慢慢地有了美感，Web页面看起来开始像我们今天使用的网站：
正如上图所示，越往后，Web 的 UI 越来越丰富，越来越漂亮。这也让 Web 开发人员不得不在布局、设计和排版等方面花费更多的时间。虽然 Web 开发人员为 Web 布局花费不少时间，但在这个过程中，也积累了很多不同的布局方法。在早期，Web 开发人员主要采用 固定宽度 和 流式布局 两种布局方案来实现 Web 页面的布局。特别是流式布局，自 Glenn Davis提出和推广之后，可谓是轰动一时，并且长期以来，都认为流式布局就是响应式Web布局。
流式布局（Liquid Layout）可以调整Web页面尺寸以适应不同的显示器分辨率或浏览器窗口的大小。
来看一个流式布局的简单示例：
带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（2）https://developer.aliyun.com/article/1340896?groupCode=taobaotech
