CSS 容器查询（CSS Container Queries）
最新回答
嘴馋
2026-04-14 05:21:10
在Chrome浏览器中，容器查询功能需要手动开启。通过设置`chrome://flags/#enable-container-queries`，将Default改为Enabled。
为了使用容器查询，CSS引入了三个新属性：container-type、container-name 和 container。container 是这两个属性的简写，用于声明元素为查询容器，并指定容器的类型与名称。container-type支持多种属性类型，container-name用于指定容器查询的名称。
通过`@container`声明容器查询样式。例如，当`div`元素宽度小于800px时，`span`元素的字体颜色变为灰色。
容器查询的类型包括但不限于`min-width`、`max-width`、`min-height`、`max-height`等，用于限制元素的尺寸和布局。任何具有尺寸和布局限制的元素都可以通过新的`@container`规则进行查询。
标准目前处于工作草案阶段，多数浏览器暂不支持该特性。容器查询将显著增强页面的响应式设计，为组件样式提供更多可能性，使其更加通用。
若想深入探索容器查询的应用与实践，可访问具体示例代码。公众号「KooFE前端团队」不定期发布前端技术文章，欢迎微信搜索关注。
热门标签
