container queries：响应式设计的下一个拐点-千晨网

媒体查询（media queries）大家都在用——屏幕宽度决定布局，这是过去十年响应式 CSS 的基石。但它有一个根本性的局限：它只能感知视口（viewport），感知不到组件本身的大小变化。

container queries 解决的就是这个问题。

为什么媒体查询不够用了

举一个常见的例子：一个卡片组件，在桌面端侧边栏里它是窄的，在主内容区它是宽的，在弹窗里又是另一种尺寸。用媒体查询，你要写很多套样式来覆盖不同场景，而且这些场景跟组件本身其实没关系——只跟父容器有关。

container queries 让组件能够”自响应”：我只关心我自己有多宽，不关心屏幕多宽。

第一步：在父容器上声明 containment

.card-container {
  container-type: inline-size;
  container-name: card;
}

第二步：在组件内使用容器查询

.card {
  display: grid;
  grid-template-columns: 1fr;
}

@container card (min-width: 400px) {
  .card {
    grid-template-columns: 2fr 1fr;
  }
}

这样，无论这个容器放在哪里——侧边栏、主内容区、弹窗——卡片都会根据自身宽度自动调整布局，不再受屏幕宽度控制。

媒体查询是”全局的”：视口有多宽，所有元素一起响应。

container queries 是”局部的”：每个容器独立响应自己的尺寸变化。

用一个图来说明：一个带图片和文字的卡片，在视口宽度 800px 时，媒体查询会让它横排；但如果这个卡片本身被放在一个 300px 宽的侧边栏里，它应该竖排——container queries 让这个”条件”变得可声明。

2026 年初，现在主流浏览器（Chrome、Edge、Safari、Firefox）都已经支持 container queries 了。除非要兼容非常老的浏览器项目，否则可以直接用，不需要 polyfill。

我觉得最有价值的场景有两个：

一是设计系统/组件库。组件不需要知道自己被放在什么页面里，只需要声明”如果我有足够的空间，我就横向排列；否则竖向”。这样同一个组件可以在不同项目里直接用，不需要改样式。

二是 CMS 主题。用户可能在正文区插入图片，也可能在侧边栏插入同一个组件，container queries 让这两种场景都能自适应，不需要写两套样式。

container queries 的进阶用法是 @container-style，可以把容器尺寸信息注入为 CSS 自定义属性：

@container card style(--is-wide: true) {
  .card { background: blue; }
}

这让样式逻辑可以基于容器状态做更复杂的判断，而不只是宽度数值。

container queries 不是一个”酷炫的新特性”，而是 CSS 组件化思路的一个关键补全。过去我们用 BEM、用 CSS-in-JS、用 Tailwind，都是为了让组件”自包含”。container queries 从根本上解决了这个问题——组件终于可以真正感知自身环境了。

如果你在做设计系统或者经常写可复用组件，这大概是你现在最应该掌握的 CSS 新特性。

文章版权归作者所有，未经允许请勿转载。

THE END