响应式设计的进化：从媒体查询到容器查询

媒体查询的局限性

传统媒体查询基于视口（viewport）大小来调整样式，这在组件化开发中存在根本性的问题：同一个组件在不同位置可能需要不同的布局，但媒体查询无法感知组件的上下文。

容器查询的工作原理

容器查询让你可以基于父容器的大小来设置样式：

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

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

实际应用场景

容器查询最适合的场景是可复用组件：卡片组件、侧边栏、文章列表等。这些组件可能出现在不同宽度的布局区域中，容器查询让它们能够自适应。

浏览器支持现状

截至 2026 年，所有主流浏览器均已支持容器查询，可以放心在生产环境使用。Tailwind CSS v4 也原生支持容器查询工具类。