CSS Container Queries：告别媒体查询的响应式新范式

引言

媒体查询（Media Queries）自 CSS2 诞生以来一直是响应式设计的核心工具。但它的设计有一个根本局限——它只能响应视口（viewport）的尺寸，无法响应父容器的尺寸。

在组件化开发的今天，一个组件可能被放在侧边栏、主内容区、弹窗中等各种不同尺寸的容器中。我们希望组件能根据自身所在容器的大小自动调整布局，而不是依赖全局视口尺寸。CSS Container Queries 就是为此而生。

Container Queries 在 2023 年底获得了所有主要浏览器的支持，标志着从"页面级响应式"到"组件级响应式"的范式转变。

基本用法

使用 Container Queries 只需要两步：

1. 定义容器

/* 将一个元素定义为查询容器 */
.card-container {
  container-type: inline-size;
  container-name: card;
}

container-type: inline-size 表示只关注内联方向（水平方向）的尺寸变化。 你也可以使用 size 来同时关注宽高，但要注意这会创建一个新的层叠上下文。

2. 编写容器查询

/* 当容器宽度 >= 400px 时采用横向布局 */
@container card (min-width: 400px) {
  .card-inner {
    flex-direction: row;
  }
  .card-cover {
    width: 40%;
  }
}

/* 当容器宽度 < 400px 时采用纵向布局 */
@container card (max-width: 399px) {
  .card-inner {
    flex-direction: column;
  }
  .card-cover {
    width: 100%;
  }
}

与媒体查询的对比

实际案例：卡片组件

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

.product-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

@container product-card (min-width: 500px) {
  .product-card {
    flex-direction: row;
    align-items: center;
  }
  .product-card img {
    width: 200px;
    flex-shrink: 0;
  }
}

@container product-card (min-width: 800px) {
  .product-description { display: block; }
  .product-card { padding: 2rem; }
}

高级技巧

容器查询单位

Container Queries 引入了一组新的 CSS 单位：

• cqw — 查询容器宽度的 1%
• cqh — 查询容器高度的 1%
• cqi — 查询容器内联方向尺寸的 1%
• cqb — 查询容器块方向尺寸的 1%
• cqmin / cqmax — cqi 和 cqb 的较小/较大值

@container (min-width: 600px) {
  .content {
    font-size: clamp(1rem, 4cqi, 2rem);
    padding: 2cqi;
  }
}

浏览器兼容性

截至 2026 年初，Container Queries 在 Chrome 105+、Firefox 110+、Safari 16.4+ 中已经得到完整支持，覆盖了全球超过 90% 的浏览器用户。对老旧浏览器的降级方案也很简单——组件的基础样式（无容器查询的样式）就是默认的降级方案。

总结

Container Queries 的诞生意味着 CSS 终于拥有了真正的组件级响应式能力。它不仅是语法层面的改进，更是一种设计思维的转变——从"页面导向"到"组件导向"。如果你正在开发组件库或设计系统，Container Queries 应该成为你的首选响应式方案。