容器查询

定义

容器查询（Container Queries）是 CSS 的一项布局特性，允许元素根据祖先容器的尺寸或样式应用不同规则，语法为 @container，与依赖视口的媒体查询形成互补。

语法示例

``css .card-wrap { container-type: inline-size; } @container (min-width: 400px) { .card { display: flex; } } `` 需先在容器上声明 container-type（或简写 container），子孙元素才能针对该容器编写查询。还提供 cqw、cqh 等容器相对单位。

解决的问题

媒体查询只能感知视口，同一组件放进侧栏与主栏时无法自适应。容器查询让组件「关心自己所处的空间」，与组件化开发范式天然契合，被视为响应式设计的重要进化。

支持情况

该特性经社区多年呼吁后进入标准，Chrome、Safari、Firefox 等主流浏览器均已支持尺寸容器查询，样式查询（style queries）支持仍在推进中。