容器查询（Container Queries）入门：比媒体查询更灵活的响应式设计

容器查询允许开发者根据元素父容器（而非整个视口）的尺寸来应用样式。这意味着同一个组件可以在不同大小的容器中智能地调整自己的布局和外观，真正实现了组件级响应式设计。想象一个卡片组件：在侧边栏窄容器中显示为紧凑视图，在主内容区宽容器中显示为扩展视图——这正是容器查询的用武之地。首先，需要将元素声明为容器：css/* 或者使用简写属性 */size- 同时跟踪块向和内联方向尺寸- 只跟踪内联方向尺寸（通

fineday_

607人浏览 · 2025-11-19 19:47:55

fineday_ · 2025-11-19 19:47:55 发布

在响应式网页设计领域，媒体查询（Media Queries）长期以来一直是实现布局适配的核心技术。但当我们希望组件能够根据其容器尺寸而非视口尺寸来调整样式时，媒体查询就显得力不从心了。现在，容器查询（Container Queries）的出现彻底改变了这一局面。

什么是容器查询？

容器查询允许开发者根据元素父容器（而非整个视口）的尺寸来应用样式。这意味着同一个组件可以在不同大小的容器中智能地调整自己的布局和外观，真正实现了组件级响应式设计。

想象一个卡片组件：在侧边栏窄容器中显示为紧凑视图，在主内容区宽容器中显示为扩展视图——这正是容器查询的用武之地。

容器查询 vs 媒体查询：为何更灵活？

媒体查询的局限性

css

/* 传统媒体查询 - 基于视口 */
@media (max-width: 768px) {
  .card {
    flex-direction: column;
  }
}

媒体查询只关注视口尺寸，无法感知组件实际所处的容器环境。这导致：

组件无法根据所在容器自适应
在复杂布局中表现僵化
组件复用性受限

容器查询的优势

css

/* 容器查询 - 基于容器 */
@container (max-width: 400px) {
  .card {
    flex-direction: column;
  }
}

容器查询让组件真正"感知"环境，实现：

真正的组件独立性 - 组件样式与具体使用场景解耦
更精细的布局控制 - 基于实际容器而非视口
更高的可复用性 - 同一组件在不同容器中智能适配

如何开始使用容器查询

步骤1：定义容器上下文

首先，需要将元素声明为容器：

css

.container {
  container-type: inline-size;
  /* 或者使用简写属性 */
  container: card-container / inline-size;
}

container-type 值可以是：

size - 同时跟踪块向和内联方向尺寸
inline-size - 只跟踪内联方向尺寸（通常指宽度）
normal - 元素不是容器

步骤2：编写容器查询

然后，基于容器尺寸应用样式：

css

.card {
  display: flex;
  gap: 1rem;
}

/* 当容器宽度小于400px时 */
@container (max-width: 400px) {
  .card {
    flex-direction: column;
  }
  
  .card__image {
    aspect-ratio: 16 / 9;
  }
}

/* 当容器宽度大于700px时 */
@container (min-width: 700px) {
  .card {
    padding: 2rem;
    gap: 2rem;
  }
}

完整示例

html

<div class="container">
  <article class="card">
    <img src="image.jpg" class="card__image" alt="示例图片">
    <div class="card__content">
      <h3 class="card__title">卡片标题</h3>
      <p class="card__description">这是一个使用容器查询的卡片组件示例。</p>
      <button class="card__button">了解更多</button>
    </div>
  </article>
</div>

<style>
.container {
  container-type: inline-size;
  container-name: card-container;
  resize: both; /* 仅为演示目的，允许调整大小 */
  overflow: auto;
  max-width: 800px;
  margin: 2rem auto;
}

.card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.card__image {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
}

.card__content {
  flex: 1;
}

/* 中等容器尺寸 */
@container card-container (max-width: 600px) {
  .card {
    flex-direction: column;
  }
  
  .card__image {
    width: 100%;
    height: 200px;
  }
}

/* 小容器尺寸 */
@container card-container (max-width: 400px) {
  .card {
    text-align: center;
  }
  
  .card__button {
    width: 100%;
  }
}
</style>

容器查询单位

除了容器查询，CSS还引入了容器查询单位，让你可以根据容器尺寸设置数值：

cqw - 容器宽度的1%
cqh - 容器高度的1%
cqi - 容器内联尺寸的1%
cqb - 容器块尺寸的1%
cqmin - cqi和cqb中较小的值
cqmax - cqi和cqb中较大的值

css

.card__title {
  /* 字体大小基于容器宽度 */
  font-size: clamp(1rem, 5cqi, 2rem);
}

浏览器支持与渐进增强

截至目前，所有现代浏览器都已支持容器查询。对于旧版浏览器，可以采用渐进增强策略：

css

.card {
  /* 回退样式 */
  display: block;
}

/* 支持容器查询的浏览器会应用这些样式 */
@supports (container-type: inline-size) {
  .card {
    display: flex;
  }
  
  @container (max-width: 400px) {
    .card {
      display: block;
    }
  }
}