CSS Container Queries是前端开发响应式布局领域的重要演进，解决了媒体查询（Media Queries）只能基于视口尺寸进行适配的局限。容器查询允许组件根据其父容器尺寸自适应样式，使真正独立的组件级响应式设计成为可能。截至2026年，主流浏览器已全面支持Container Queries及配套的容器查询单位（cqw、cqh、cqi、cqb、cqmin、cqmax），Tailwind CSS和Bootstrap等主流框架也已集成相关能力。

容器查询与媒体查询的核心差异

媒体查询基于浏览器视口（viewport）尺寸触发样式切换，在组件化开发中存在明显局限：同一个组件被放置在不同容器中时（如侧边栏200px、主内容区800px），无法根据自身可用空间调整布局。容器查询通过监测容器尺寸的变化，让组件响应自身的渲染上下文而非全局视口。

/* Media Query: viewport */
@media (min-width: 768px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Container Query: container */
.card-container { container-type: inline-size; }

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

@container (min-width: 700px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

关键区别在于：同一个card组件被放在200px的侧边栏时会显示单列布局，被放在800px的主内容区时会显示三列布局，而无需任何JavaScript计算或父级组件传递props。组件的响应式行为完全封装在自身样式内，符合组件库设计的独立性和可复用性原则。

container-type语法与容器上下文设置

启用容器查询需要先声明容器上下文。container-type属性定义容器尺寸的查询维度，container-name属性为容器命名以支持嵌套场景下的精确选择。

.layout-sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

.layout-main {
  container-type: inline-size;
  container-name: main;
}

.widget { container: widget / inline-size; }

@container main (min-width: 600px) {
  .product-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

@container sidebar (max-width: 250px) {
  .product-list { display: flex; flex-direction: column; }
}

container-type: inline-size是最常用的配置，仅查询容器宽度，不会因高度变化触发布局循环。size类型同时查询宽高，但要求容器有确定的高度值，否则会导致查询无法生效。在实际项目中，inline-size覆盖了90%以上的使用场景。

组件级响应式布局重构实践

以下是一个电商产品卡片组件的完整容器查询实现，展示如何在不同容器尺寸下切换布局模式：

.product-card-wrapper { container: card / inline-size; }

.product-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.5rem;
  background: #fff;
}

/* Compact: narrow container */
@container card (max-width: 300px) {
  .product-card { padding: 0.75rem; gap: 0.5rem; }
  .product-card__image { width: 100%; max-height: 180px; }
  .product-card__title { font-size: 0.875rem; }
}

/* Standard: medium container */
@container card (min-width: 301px) and (max-width: 600px) {
  .product-card { flex-direction: row; gap: 1rem; }
  .product-card__image { width: 120px; height: 120px; flex-shrink: 0; }
  .product-card__content { flex: 1; }
}

/* Wide: large container */
@container card (min-width: 601px) {
  .product-card { flex-direction: row; gap: 1.5rem; padding: 1.5rem; }
  .product-card__image { width: 200px; height: 200px; flex-shrink: 0; }
  .product-card__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 2rem;
  }
}

这种实现方式使产品卡片组件可以在侧边栏推荐位（200px宽）、搜索结果网格（350px宽）、详情页推荐区（700px宽）等不同位置自动适配布局，无需为每个位置编写特定的CSS变体或通过JavaScript检测容器尺寸。

容器查询单位与样式查询

容器查询单位（Container Query Units）提供了基于容器尺寸的相对单位，类似于vw/vh基于视口的计算方式。cqw等于容器宽度的1%，cqh等于容器高度的1%，cqi基于行内尺寸，cqb基于块尺寸，cqmin取宽高较小值，cqmax取较大值。

.hero-text { container-type: inline-size; }

.hero-text h1 {
  font-size: clamp(1.5rem, 8cqw, 4rem);
  line-height: 1.2;
}

.hero-text p {
  font-size: clamp(0.875rem, 3cqw, 1.25rem);
}

.hero-text { padding: 5cqw; gap: 2cqw; }

/* Style Queries */
@container style(--layout: compact) {
  .menu { flex-direction: column; }
}

@container style(--layout: expanded) {
  .menu { flex-direction: row; }
}

Style Queries（样式查询）是容器查询的扩展能力，允许基于容器的自定义属性值而非尺寸触发样式切换。这使得组件可以通过设置CSS变量来控制子组件的样式表现，实现比prop传递更轻量的跨组件样式通信。不过Style Queries目前浏览器支持率仍有限，建议作为渐进增强功能使用。

浏览器兼容性与渐进增强策略

Container Queries自2023年起在所有主流浏览器（Chrome 105+、Firefox 110+、Safari 16+）中全面支持。对于需要兼容旧浏览器的项目，可以使用@supports规则实现渐进增强：

/* Baseline */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* Enhanced */
@supports (container-type: inline-size) {
  .card-container { container-type: inline-size; }
  @container (min-width: 500px) {
    .card-grid { grid-template-columns: repeat(2, 1fr); }
  }
}

/* Fallback */
@supports not (container-type: inline-size) {
  @media (min-width: 768px) {
    .card-grid { grid-template-columns: repeat(2, 1fr); }
  }
}

auto-fill和minmax组合提供了不依赖容器查询的自适应网格方案，作为回退策略在旧浏览器中仍然可用。当浏览器支持容器查询时，@supports块中的规则覆盖基线布局，实现更精确的组件级响应。在生产环境中，可以将容器查询单位与clamp()函数结合，实现同时兼容新旧浏览器的流体排版方案。Tailwind CSS通过@container修饰符提供了容器查询的原子类支持，使用@container-md:、@container-lg:等前缀快速应用容器查询样式。

媒体查询（Media Queries）基于视口宽度决定布局，组件样式与所在页面强耦合。同一个卡片组件放在侧边栏和主内容区需要不同布局，媒体查询无法区分这种场景。CSS Container Queries 让组件根据父容器宽度自适应，实现真正的组件级响应式设计。2023 年起主流浏览器全面支持，本文从语法到工程实践给出完整方案。

Container Queries与Media Queries的本质区别

媒体查询的响应条件是浏览器视口尺寸，所有组件共享同一套断点。当页面布局复杂时，侧边栏中的组件在宽屏下实际可用宽度可能只有 300px，却因视口宽度 1440px 而触发了”桌面”布局，导致内容溢出或留白。

容器查询将响应条件从视口转移到最近的祖先容器。组件根据自身实际可用空间决定布局，与页面整体宽度解耦。一个按钮组在 400px 容器中横向排列，在 200px 容器中自动切换为纵向堆叠，无需 JavaScript 介入。

container-type与容器上下文声明

使用容器查询前，需要将元素声明为查询容器：

/* 声明容器上下文 */
.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

.main-content {
  container-type: inline-size;
  container-name: main;
}

/* 简写形式 */
.card-wrapper {
  container: card / inline-size;
}

container-type: inline-size 表示以容器的内联尺寸（通常是宽度）作为查询维度。inline-size 是最常用值，因为大部分响应式布局关注宽度变化。size 同时查询宽高，但会建立尺寸包含（size containment），要求容器有明确尺寸，使用场景较少。

container-name 为容器命名，当组件被嵌套在多层容器中时，可通过名称指定查询哪个容器的尺寸。

@container查询语法与条件匹配

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

/* 当容器宽度 >= 400px 时切换为双列布局 */
@container (min-width: 400px) {
  .card {
    grid-template-columns: 200px 1fr;
    gap: 24px;
  }
}

/* 当容器宽度 >= 600px 时切换为三列布局 */
@container (min-width: 600px) {
  .card {
    grid-template-columns: 200px 1fr 1fr;
  }
}

/* 命名容器查询 */
@container main (min-width: 800px) {
  .card {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* 范围查询语法（CSS Level 4） */
@container (400px <= width <= 600px) {
  .card {
    background: yellow;
  }
}

容器查询支持 min-width、max-width 及范围语法。命名容器查询通过 @container main (min-width: 800px) 形式指定目标容器，适用于多个嵌套容器场景。

组件化实战：自适应卡片组件

一个完整的响应式卡片组件，根据容器宽度切换布局并调整字体大小：

<!-- HTML 结构 -->
<div class="page-layout">
  <aside class="sidebar">
    <article class="product-card">
      <img class="product-card__image" src="product.jpg" alt="产品图" />
      <div class="product-card__body">
        <h3 class="product-card__title">无线降噪耳机</h3>
        <p class="product-card__desc">主动降噪，40小时续航</p>
        <div class="product-card__footer">
          <span class="product-card__price">¥899</span>
          <button class="product-card__btn">加入购物车</button>
        </div>
      </div>
    </article>
  </aside>

  <main class="main-content">
    <article class="product-card">
      <!-- 同一组件结构 -->
    </article>
  </main>
</div>

/* CSS */
.page-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
}

.sidebar {
  container-type: inline-size;
}

.main-content {
  container-type: inline-size;
}

/* 基础布局：窄容器下的纵向排列 */
.product-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-card__image {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.product-card__body {
  padding: 16px;
}

.product-card__title {
  font-size: 16px;
  margin: 0 0 8px;
}

.product-card__desc {
  font-size: 14px;
  color: #666;
  margin: 0 0 12px;
}

.product-card__footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 容器宽度 >= 300px：图片变水平排列 */
@container (min-width: 300px) {
  .product-card {
    flex-direction: row;
  }

  .product-card__image {
    width: 140px;
    height: auto;
    min-height: 100%;
  }

  .product-card__body {
    flex: 1;
  }

  .product-card__footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* 容器宽度 >= 500px：加大间距和字体 */
@container (min-width: 500px) {
  .product-card__image {
    width: 200px;
  }

  .product-card__body {
    padding: 24px;
  }

  .product-card__title {
    font-size: 20px;
  }

  .product-card__desc {
    font-size: 15px;
  }
}

同一个 .product-card 组件在侧边栏（容器宽 280px）中显示为纵向卡片布局，在主内容区（容器宽 800px+）中自动切换为横向图文布局，无需为不同页面位置编写不同 CSS。

容器查询单位：cqw/cqh/cqi/cqb

容器查询单位类似于视口单位 vw/vh，但参照物是容器尺寸而非视口：

.hero-section {
  container-type: inline-size;
}

.hero-title {
  /* 10cqi = 容器内联尺寸的 10% */
  font-size: 10cqi;
  /* 最小不小于 1.5rem，最大不超过 4rem */
  font-size: clamp(1.5rem, 10cqi, 4rem);
}

.hero-padding {
  /* 5cqw = 容器宽度的 5% */
  padding: 5cqw;
}

单位含义：cqw 容器宽度百分比，cqh 容器高度百分比，cqi 容器内联尺寸百分比，cqb 容器块尺寸百分比，cqmin/cqmax 取较小/较大值。结合 clamp() 实现流体排版，标题大小随容器宽度平滑变化且有上下限保护。

容器查询的浏览器兼容与降级方案

Container Queries 在 Chrome 105+、Safari 16+、Firefox 110+ 全面支持，覆盖 2026 年主流浏览器。针对旧浏览器的渐进增强方案：

@supports (container-type: inline-size) {
  /* 容器查询支持的样式 */
  @container (min-width: 400px) {
    .product-card {
      flex-direction: row;
    }
  }
}

@supports not (container-type: inline-size) {
  /* 降级到媒体查询 */
  @media (min-width: 768px) {
    .sidebar .product-card {
      flex-direction: column;
    }
    .main-content .product-card {
      flex-direction: row;
    }
  }
}

也可使用 polyfill 方案如 container-query-polyfill 通过 ResizeObserver 实现降级支持，但 polyfill 有性能开销且不支持容器查询单位。推荐策略是对核心布局使用 @supports 降级，对增强效果仅在支持的浏览器中启用。

Tailwind CSS 3.4+ 内置容器查询支持，通过 @container 变体直接使用：

<div class="@container">
  <div class="flex flex-col @md:flex-row @lg:gap-8">
    <!-- 组件内容 -->
  </div>
</div>

@container 标记容器上下文，@md:、@lg: 前缀对应不同容器宽度断点，与 md:、lg: 视口断点语法一致，降低心智成本。