CSS容器查询Container Query响应式布局实战解析

CSS容器查询（Container Query）是响应式布局的重大演进。传统媒体查询（Media Query）基于视口宽度响应，无法处理组件在不同容器尺寸下的适配问题。容器查询让组件根据父容器尺寸响应样式变化，真正实现组件级别的响应式设计。前端开发中，这一特性改变了组件库的设计模式，使组件不再依赖页面级视口状态。

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

媒体查询以浏览器视口为参照，@media (max-width: 768px) 在视口宽度小于768px时生效。问题在于：同一个组件如果出现在侧边栏（宽度300px）和主内容区（宽度800px）中，即使视口宽度相同，组件的实际可用空间完全不同，媒体查询无法区分这种情况。

容器查询以组件的父容器为参照。当容器宽度变化时，组件自动调整布局，与视口宽度无关。这意味着同一个卡片组件在300px的侧边栏中自动切换为竖向排列，在800px的主区域中展示为横向布局，无需任何JavaScript逻辑判断。

container-type与@container语法详解

使用容器查询需要两步：先声明容器，再编写容器查询规则。

声明容器使用container-type属性：

/* 声明容器上下文 */
.card-container {
  container-type: inline-size;
  /* 或使用简写 */
  container: card-container / inline-size;
}

/* container-type 取值：
   normal - 默认值，不建立容器查询上下文
   inline-size - 查询容器的inline方向尺寸（通常为宽度）
   size - 同时查询inline和block方向尺寸（需要容器有明确尺寸）
*/

inline-size是最常用的值，因为大多数响应式需求基于容器宽度变化。size需要容器在两个方向都有确定尺寸，使用场景较少。

编写容器查询规则：

/* 默认样式：窄容器 */
.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.card-image {
  width: 100%;
  height: 180px;
}

/* 容器宽度大于400px时的样式 */
@container (min-width: 400px) {
  .card {
    flex-direction: row;
    gap: 20px;
    padding: 24px;
  }

  .card-image {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
  }
}

/* 容器宽度大于600px时的样式 */
@container (min-width: 600px) {
  .card {
    padding: 32px;
    gap: 32px;
  }

  .card-image {
    width: 280px;
    height: 280px;
  }

  .card-title {
    font-size: 1.5rem;
  }
}

同一个.card组件，在不同宽度的容器中呈现完全不同的布局。容器宽度小于400px时竖向排列，400px到600px之间切换为横向小图布局，超过600px展示为横向大图布局。

容器查询单位与尺寸响应

容器查询引入了一组新的尺寸单位，基于容器尺寸而非视口尺寸计算：

/* 容器查询单位 */
.card-title {
  /* cqw: 容器宽度的1% */
  font-size: 5cqw;

  /* cqh: 容器高度的1% */
  padding: 2cqh;

  /* cqi: 容器inline尺寸的1%（通常等同cqw） */
  margin-inline: 3cqi;

  /* cqb: 容器block尺寸的1%（通常等同cqh） */
  margin-block: 2cqb;

  /* cqmin: 容器较小尺寸的1% */
  border-radius: 2cqmin;

  /* cqmax: 容器较大尺寸的1% */
  width: 50cqmax;
}

/* 实际应用：标题字号随容器宽度缩放 */
.card-title {
  font-size: clamp(1rem, 4cqw, 2rem);
  /* 最小1rem，最大2rem，中间值取容器宽度的4% */
}

.card-body {
  font-size: clamp(0.875rem, 2.5cqw, 1.125rem);
}

clamp()结合容器查询单位，实现字号在合理范围内随容器平滑缩放，既不会太小影响可读性，也不会过大破坏布局。

组件级响应式布局实战案例

以一个产品列表组件为例，展示容器查询在实际项目中的应用。组件需要适配单列、双列、三列三种布局：

<!-- HTML结构 -->
<div class="product-grid">
  <div class="product-card">
    <img src="product1.jpg" alt="" class="product-img">
    <h3 class="product-name">产品A</h3>
    <p class="product-desc">产品描述文本</p>
    <span class="product-price">¥299</span>
  </div>
  <!-- 更多产品卡片... -->
</div>

/* CSS样式 */
.product-grid {
  container-type: inline-size;
  container: product-grid / inline-size;
  display: grid;
  gap: 16px;
}

/* 默认：单列布局 */
.product-grid {
  grid-template-columns: 1fr;
}

/* 容器宽度 > 350px：双列 */
@container (min-width: 350px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* 容器宽度 > 600px：三列 */
@container (min-width: 600px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/* 容器宽度 > 900px：四列 */
@container (min-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
  }
}

/* 产品卡片内部布局也响应容器 */
.product-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.product-name {
  font-size: clamp(0.875rem, 3cqw, 1.125rem);
  font-weight: 600;
}

@container (min-width: 350px) {
  .product-name {
    font-size: clamp(0.875rem, 2.5cqw, 1rem);
  }
}

这个产品网格组件可以嵌入页面任何位置：放在全宽主区域自动展示四列，放入360px侧边栏自动切换为双列，放入移动端窄屏自动变为单列。所有适配通过CSS完成，不依赖任何JavaScript或媒体查询。

浏览器兼容性与渐进增强方案

容器查询自2023年起在主流浏览器中获得全面支持，Chrome 105+、Firefox 110+、Safari 16+均已原生支持。对于需要兼容旧浏览器的项目，可使用container-query-polyfill作为降级方案。

/* 检测容器查询支持 */
@supports (container-type: inline-size) {
  /* 容器查询样式 */
  .product-grid {
    container-type: inline-size;
  }

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

/* 降级方案：不支持时使用媒体查询 */
@supports not (container-type: inline-size) {
  @media (min-width: 768px) {
    .product-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1200px) {
    .product-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}

容器查询的推广正在改变组件库的设计范式。基于容器查询的组件不再假设运行环境，而是根据实际容器空间自适应布局，使组件真正成为独立、可复用的设计单元。响应式布局的重心从页面级向组件级迁移，这是前端工程化发展的自然结果。