带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（23）https://developer.aliyun.com/article/1340872?groupCode=taobaotech
可以在上面示例中尝试拖动卡片右下角滑块改变卡片容器宽度，你将看到的效果如下：
有了这样一个卡片组件之后，如果将其放在不同的位置，即使是同一页面，同一视窗断点下，也会根据其容器断点自动匹配最为适合的布局（或UI效果）。比如：
Untitled @airen CodePen
（地址：https://codepen.io/airen/pen/WNdKgMK）
（地址：https://codepen.io/）
就我个人认为，两者不是谁替代谁的关系，更应该是两者共存的关系。容器查询特性的出现，我们可以不再局限于视窗断点来调整布局或UI样式，还可以基于容器断点来调整布局或UI。换句话说，媒体查询是一种宏观的布局
（Macro Layout），可以用于整体页面布局；而容器查询可以调整组件的每个元素，创建了一种微观的布局
（Micro Layout）。
容器查询解决的是什么问题？
众所周知，响应式设计的概念的核心是 CSS 媒体查询的出现，它允许开发者根据浏览器视窗的尺寸来设置各种样式规则。也正因此，响应式设计和CSS媒体查询开启了更多的 Web 布局解决方案，以及多年来围绕响应视窗尺寸创建的最佳实践。而且，近些年来，设计系统和组件库也得到了更广泛的普及。对于更多开发者而言，更大的期望是：
一次建成，随地部署！
这也意味着一个单独开发的 Web 组件可以在任何情况下工作，以使建立复杂的界面更加有效和一致。只不过，这些组件会组合在一起，形成一个Web页面或Web应用界面。目前，在只有媒体查询的情况下，往往需要额外的一层 来协调跨视窗大小变化的组件的突变。在这些情况下，你可能不得不在更多的断点下使用更多的类名来设置不同的样式规则。甚至更惨的是，即使这样做仍然很多情况之下也无法达到最理想的UI表面。
很多时候，响应式Web设计不是关于浏览器视窗尺寸而是关于容器的尺寸大小，比如：
庆幸的是，CSS容器查询的出现，使我们超越了只考虑浏览器视窗尺寸的范围，并允许任何组件或元素对定义的容器尺寸做出响应。因此，虽然你可能仍然使用响应式来给Web页面布局，但Web页面的任何一个组件都可能通过容 器查询来定义自己的样式变化。然后，它可以根据它是在一个窄的还是宽的容器中显示，来调整它的样式。
带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（25）https://developer.aliyun.com/article/1340868?groupCode=taobaotech
