带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（16）https://developer.aliyun.com/article/1340879?groupCode=taobaotech
自 2010 年 @Ethan Marcotte首次提出 响应式Web设计（RWD）（地址：https://alistapart.com/article/re- sponsive-web-design/）的设计理念（概念），Web设计就进入现代Web布局时代。开发者可以根据 CSS 媒体查询特性 （通常是视窗宽度、媒体设备特性等）来为Web页面定制不同的表现形式，比如可以根据用户浏览内容的设备特性来呈现不同的布局、不同的字体大小和不同的图片等。
但对于 Web 设计师或Web开发者来说，在现代Web设计或布局中仍然缺少一特性，页面的设计不能够响应其容器的宽度（或其他特性）。也就是说，如果Web开发者能够根据容器宽度来改变UI样式，那就更好了。容器查询将在 很大程度上帮助 Web 开发者更好的完成他们的工作，在为Web开发基于组件代码时，其遗漏（容器查询特性的缺失）是一个巨大的限制。
正因此，有关于容器查询的特性在社区中的探讨就没有停止过。
早在2019年底，@ZachLeatherman在寻找容器查询起源（地址：https://www.zachleat.com/web/ori- gin-container-queries/）时，找到的最早有关于容器查询的解决方案是 @Andy Hume的基于 JavaScript 的选择器查询和响应式容器的解决方案（地址：https://github.com/ahume/selector-queries）。
2015 年， @Mat ‘Wilto’ Marquis在响应式图片社区小组引入了 > 元素，将响应式图片带到了响应式Web 设计的世界，他在《Container Queries: Once More Unto the Breach》（地址：https://ali- stapart.com/article/container-queries-once-more-unto-the-breach/）一文中概述了元素查询的挑战和使用 案例演示了容器查询的特性。
然后，在2 017年，@EthanMarcotte写了一篇关于容器查询相关的文章（地址：https://ethanmar- cotte.com/wrote/on-container-queries/），并提出了这样的看法：
在他最初关注的响应式 Web 设计的文章之后的几年里，Web设计师和开发人员的工作越来越集中在组件上，而不是整个页面，这使得媒体查询不那么理想。
从那时起，虽然有很多人主张使用媒体查询，但容器查询向前推进的速度还是不够理想。@L. David Baron在
《Thoughts on an implementable path forward for Container Queries》（地址：https://github.com/dbar- on/container-queries-implementability）中简明扼要地解释了容器查询向前推进慢的问题出在哪？
容器查询要求样式取决于组件的大小，但考虑到 CSS 的工作原理，组件中的样式会影响其大小。任意打破这个循环，既会产生奇怪的结果，又会干扰浏览器的工作，还会增加浏览器优化的成本。
除了 @David Baron 之外，2018年6月， @Greg Whitworth在荷兰阿姆斯特丹举办的 CSS Day + UX Special
（地址：https://noti.st/events/elQrNX/css-day-ux-special）活动上的主题分享《Over the moon for container queries》（地址：https://noti.st/gregwhitworth/UDul7E/over-the-moon-for-container
-queries）中也解释了容器查询在Web平台上推进慢的相关原因。更重要的是，@Greg Whitworth还提供了使用
新的 JavaScript API 和 CSS 的新技术来实现容器查询的特性。@David Barrrron 也提出了一个可以避免这种困境的策略（地址：https://github.com/dbaron/container-queries-implementability），更重要的是@Miriam Suzanne在@David Baron的策略基础上提出了@container方法(地址：https://github.com/oddbird/css
-sandbox/blob/main/src/rwd/query/explainer.md)（地址:https://github.com/oddbird/css-sandbox/blob/- main/src/rwd/query/explainer.md)。
@container 方法通过对被查询的元素应用大小和布局的限制来实现。任何具有尺寸和布局限制的元素都可以通过一个新的 @container规则进行查询，其语法与现有的媒体查询类似。
带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（18）https://developer.aliyun.com/article/1340877?groupCode=taobaotech
