CSS Container Queries：响应式设计的最后一块拼图

媒体查询的局限性

长期以来，我们在做响应式设计时，唯一的工具就是 Media Queries（媒体查询）。 @media (max-width: 768px) { ... } 这种方式是基于**视口（Viewport）**宽度的。

但在现代组件化开发中，这往往不够用。想象一个“卡片组件”，它既可以放在宽阔的主栏中，也可以放在狭窄的侧边栏中。

• 如果在主栏，我们希望图片在左，文字在右。
• 如果在侧边栏，我们希望图片在上，文字在下。

使用 Media Queries 很难实现这一点，因为视口宽度大并不代表侧边栏的宽度也大。我们被迫通过传入 props 或者写特定的类名来控制组件样式，这破坏了组件的独立性。

Container Queries 登场

Container Queries（容器查询）解决了这个问题。它允许元素根据其父容器的大小来调整样式。

语法示例

首先，你需要定义一个容器：

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

然后，在组件内部使用 @container：

.card {
  display: flex;
  flex-direction: column;
}

@container card (min-width: 400px) {
  .card {
    flex-direction: row;
  }
}

现在，无论 .card-container 被放在哪里，只要它的宽度超过 400px，.card 就会变成横向布局。组件完全不关心视口多大，只关心自己“住”的地方有多大。

浏览器支持与最佳实践

目前，Chrome 105+、Safari 16+ 和 Firefox 110+ 都已经支持了 Container Queries。对于不支持的浏览器，可以使用 Google Chrome Labs 提供的 polyfill。

什么时候使用？

• 高复用组件：如卡片、列表项、图表等，需要在不同布局中复用的组件。
• 微前端架构：子应用可能被嵌入到主应用的任何区域，无法预知视口大小。

Container Queries 标志着 CSS 布局能力的一次质的飞跃。它让“编写一次，到处运行”的组件设计理念真正成为了现实。如果你还在用 Media Queries 苦苦适配各种布局，是时候尝试一下 Container Queries 了。