媒体查询的组件级局限

CSS响应式布局长期依赖@media媒体查询，它的断点判断基于浏览器视口宽度。这在组件化开发中有一个根本缺陷：同一个组件可能出现在页面不同宽度的容器中，侧边栏300px、主内容区700px、弹窗400px——组件无法根据自身容器的宽度调整布局，只能跟随视口变化。这意味着一个在700px主区域表现良好的卡片组件，被放到300px侧边栏时完全失效，因为视口宽度并没有改变。

CSS容器查询（Container Queries）解决了这个问题。它允许组件根据父容器的尺寸而非视口宽度来应用样式，实现了真正的组件级响应式能力。

@container语法与容器定义

容器查询的使用分两步：定义容器、编写查询条件。

第一步：在父元素上声明容器上下文：

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

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

container-type: inline-size表示容器只在水平方向上建立查询上下文，性能优于size（双向查询）。大多数响应式场景只需水平断点。

第二步：在子元素上编写容器查询条件：

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

@container card-container (min-width: 500px) {
  .card {
    flex-direction: row;
    gap: 2rem;
  }
  
  .card__image {
    width: 200px;
    flex-shrink: 0;
  }
}

@container card-container (min-width: 700px) {
  .card {
    padding: 2rem;
  }
  
  .card__image {
    width: 300px;
  }
}

现在.card组件在不同宽度容器中自动切换布局：窄容器纵向排列，宽容器横向排列。无论视口如何变化。

容器查询单位cqw与cqh

容器查询引入了新的相对单位：cqw（容器宽度的1%）和cqh（容器高度的1%）。这些单位在容器上下文内生效，实现字体大小和间距随容器尺寸动态缩放：

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

.card__title {
  font-size: clamp(1rem, 3cqw, 2.5rem);
  line-height: 1.3;
}

.card__meta {
  font-size: clamp(0.75rem, 2cqw, 1rem);
  color: #666;
}

.card__spacing {
  padding: clamp(0.5rem, 2cqw, 2rem);
  gap: clamp(0.5rem, 1cqw, 1.5rem);
}

clamp()与cqw单位组合，确保字体大小在合理范围内平滑缩放，不会因容器极窄而溢出或因容器极宽而失控。

容器查询与容器查询样式的配合

CSS容器查询还有一个配套特性：@container style()查询，允许基于容器自定义属性值切换样式，而非仅基于尺寸。这在主题切换、状态管理等场景下非常实用：

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

.card-wrapper[data-theme="dark"] {
  --card-theme: dark;
}

@container style(--card-theme: dark) {
  .card {
    background: #1a1a2e;
    color: #e0e0e0;
  }
}

@container style(--card-theme: light) {
  .card {
    background: #ffffff;
    color: #333333;
  }
}

样式查询不依赖resize observer，DOM属性变化即可触发，性能开销更低。

性能注意事项与浏览器兼容

容器查询的浏览器支持已覆盖Chrome 105+、Firefox 110+、Safari 16+。需要注意的性能问题：container-type: size会在两个维度上建立查询上下文，每个尺寸变化都会触发重新计算，高频率场景下可能产生性能瓶颈。优先使用inline-size只监控水平方向变化。

嵌套容器的处理：容器查询可以嵌套，内层容器查询的参考基准是最近的祖先容器。嵌套层级过深时，每一层的尺寸变化会触发级联重新计算。实际项目中建议嵌套不超过3层。

/* 不推荐：深层嵌套容器 */
.grandparent { container-type: inline-size; }
.parent { container-type: inline-size; }
.child { /* 同时受到grandparent和parent的容器查询影响 */ }

/* 推荐：只在最外层定义容器 */
.grandparent { container-type: inline-size; }
.child { /* 仅参考grandparent容器宽度 */ }

将容器定义放在需要响应式能力的最外层包装器上，内部元素通过这一层容器查询统一调整布局，减少容器层级和不必要的计算开销。

CSS容器查询解决的核心问题

传统响应式布局使用@media媒体查询，只能根据视口宽度切换样式。但在实际组件开发中，同一个组件可能被放置在宽屏主内容区和窄侧边栏中，组件自身需要的响应式断点与视口断点无关——它需要根据父容器的宽度来调整布局。CSS Container Queries（@container）正是为解决这个问题而设计，让组件的响应式行为由其容器尺寸决定，而非视口。

容器查询的浏览器支持已覆盖Chrome 105+、Firefox 110+、Safari 16+，主流浏览器均已支持，可以放心在生产环境使用。

容器查询基础语法与定义

使用@container需要两步：先在父元素上声明容器，再在子元素中编写容器查询条件。

/* 1. 定义容器 */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

/* 2. 编写容器查询 */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
  }
}

@container card (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
  .card img {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

container-type: inline-size表示容器在行内方向（宽度）上建立查询上下文。如果需要同时查询高度，使用container-type: size，但size类型的容器会脱离其块级格式化上下文，可能影响布局流。container-name为容器命名，用于在查询时区分多个容器。

实战：可复用的卡片组件响应式布局

以一个产品卡片组件为例，该组件需要在不同容器宽度下呈现不同布局：

<!-- 窄容器：侧边栏 -->
<aside class="sidebar">
  <div class="card-wrapper">
    <article class="product-card">
      <img src="product.jpg" alt="">
      <div class="card-body">
        <h3>产品名称</h3>
        <p class="price">¥299</p>
        <button>加入购物车</button>
      </div>
    </article>
  </div>
</aside>

<!-- 宽容器：主内容区 -->
<main class="content">
  <div class="card-wrapper">
    <article class="product-card">
      <!-- 同样的卡片结构 -->
    </article>
  </div>
</main>

CSS部分：

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

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

/* 宽容器：水平布局 */
@container product-card (min-width: 480px) {
  .product-card {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }
  .product-card img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    flex-shrink: 0;
  }
  .card-body {
    flex: 1;
  }
  .card-body h3 {
    font-size: 1.25rem;
  }
}

/* 中等容器：紧凑水平布局 */
@container product-card (min-width: 320px) and (max-width: 479px) {
  .product-card {
    flex-direction: row;
    gap: 0.75rem;
  }
  .product-card img {
    width: 80px;
    height: 80px;
  }
  .card-body h3 {
    font-size: 1rem;
  }
  .card-body .price {
    font-size: 0.875rem;
  }
}

容器查询单位：cqw/cqh的灵活运用

CSS容器查询单位（cqw、cqh、cqi、cqb、cqmin、cqmax）以容器尺寸为参照，类似vw/vh但基于容器而非视口：

.product-card h3 {
  font-size: clamp(1rem, 3cqw, 1.5rem);
}

.product-card .price {
  padding-inline: clamp(0.5rem, 2cqw, 1.5rem);
}

.card-body {
  gap: clamp(0.25rem, 1cqh, 0.75rem);
}

容器查询单位适合需要平滑缩放的场景，避免了断点式跳变。与clamp()配合可以在最小值和最大值之间平滑过渡，无需编写多个断点查询。

与媒体查询的协作策略

容器查询和媒体查询解决不同层面的问题，不存在替代关系：

媒体查询处理页面级布局：页面网格列数、导航栏模式、整体排版宽度。
容器查询处理组件级布局：卡片排列方向、内部元素显隐、组件内间距。

/* 页面级：媒体查询控制整体布局 */
@media (min-width: 768px) {
  .page-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
  }
}

/* 组件级：容器查询控制卡片布局 */
@container sidebar (min-width: 200px) {
  .sidebar-widget {
    padding: 1rem;
  }
}

两者组合使用的原则是：外部结构用@media，内部组件用@container。这种分层策略使得组件可以在任何页面布局中自适应，真正实现可移植的响应式组件。

性能与注意事项

容器查询的性能开销远低于媒体查询，因为浏览器只需监听容器元素的尺寸变化而非视口resize事件。但需注意：

1. 避免容器嵌套过深——嵌套的容器查询会在每一层尺寸变化时触发重新计算，超过3层嵌套可能导致布局卡顿。
2. container-type: size会创建独立的格式化上下文，影响margin折叠等行为，不确定时优先用inline-size。
3. 容器查询不能查询自身——@container规则只能应用于定义容器的子元素，不能让元素根据自身尺寸响应。这是设计意图，避免循环依赖。