容器查询让组件响应父容器的大小而非浏览器视口。经过多年作为 CSS 愿望清单项目，现在浏览器 支持率已达 97%，可以在生产环境中使用。
媒体查询用于组件的问题
媒体查询作用于视口。宽度大时应为 2 列、窄时应为 1 列的卡片组件无法通过媒体查询知道自己的 宽度。这就产生了"侧边栏问题"：在 3 列网格中看起来完美的卡片，放到侧边栏后就会出问题。
容器查询语法
首先在父元素上建立容器上下文:.card-container { container-type: inline-size; }
然后在子元素中查询容器宽度。@container 规则在最近的带有 container-type 的祖先达到指定宽度时触发。
container-type 值
| 值 | 追踪内容 |
|---|---|
| inline-size | 仅宽度（最常用） |
| size | 宽度和高度都追踪 |
何时用容器查询 vs 媒体查询
- 容器查询：组件级响应式——可以放在布局任何位置的卡片、侧边栏、小部件。
- 媒体查询：页面级响应式——导航变化、依赖整体视口大小的网格断点。
浏览器支持
Chrome 105+、Firefox 110+、Safari 16+ 支持——覆盖 2026 年 97%+ 的浏览器。无需 JavaScript polyfill 即可在生产环境使用。