CSS容器查询container query与组件级响应式布局实战

容器查询container query基础语法

CSS容器查询是前端响应式布局的一次范式升级。传统媒体查询@media基于视口宽度调整样式，无法处理同一组件在不同容器尺寸下需要不同布局的情况——比如侧边栏中的卡片和主内容区的卡片宽度不同但视口相同。容器查询让组件能根据自身所在容器的尺寸自适应，实现真正的组件级响应式设计。

容器查询的语法分两部分：声明容器和编写查询规则。

/* 声明容器：指定元素为查询容器 */.card-wrapper {  container-type: inline-size;  container-name: card;}/* 根据容器宽度编写查询规则 */@container card (min-width: 400px) {  .card {    display: grid;    grid-template-columns: 200px 1fr;    gap: 1rem;  }}@container card (min-width: 600px) {  .card {    grid-template-columns: 250px 1fr;    gap: 2rem;  }  .card__title {    font-size: 1.5rem;  }}@container card (max-width: 399px) {  .card {    display: flex;    flex-direction: column;  }}

container-type有三个可选值：inline-size（只查询行内尺寸/宽度）、size（查询宽高）、normal（不作为容器，默认值）。大多数场景用inline-size即可，因为只需要根据容器宽度调整布局。使用size会增加浏览器的布局约束计算开销。

容器查询单位cqw与cqh

容器查询引入了新的相对单位cqw（container query width）和cqh（container query height），1cqw等于容器宽度的1%，1cqh等于容器高度的1%。这些单位可以在容器查询外部使用，比@container规则更灵活。

.card-wrapper {  container-type: inline-size;}.card__title {  font-size: clamp(1rem, 3cqw, 2.5rem);}.card__image {  height: 40cqw;  object-fit: cover;}.card__padding {  padding: 2cqw;}

clamp()配合cqw实现流畅的响应式排版，无需定义多个断点。当容器宽度在333px到833px之间时，font-size从1rem线性增长到2.5rem，任何容器宽度都能获得合适的字号。

组件化场景实战：自适应Dashboard卡片

在Dashboard场景中，卡片组件可能出现在侧边栏（240px宽）、内容区（600px宽）或全宽模式（1200px宽）。用容器查询替代媒体查询，让卡片自行适配所有容器尺寸：

<div class="dashboard-layout">  <aside class="sidebar">    <div class="card-wrapper">      <article class="stat-card">...</article>    </div>  </aside>  <main class="content">    <div class="card-wrapper">      <article class="stat-card">...</article>    </div>  </main></div>

.card-wrapper {  container-type: inline-size;  container-name: stat-card;}/* 窄容器：竖向堆叠 */@container stat-card (max-width: 300px) {  .stat-card { text-align: center; }  .stat-card__icon {    margin: 0 auto 0.5rem;    width: 32px; height: 32px;  }  .stat-card__value { font-size: 1.25rem; }  .stat-card__label { font-size: 0.75rem; }  .stat-card__trend { justify-content: center; }}/* 中等容器：水平紧凑 */@container stat-card (min-width: 301px)                    and (max-width: 599px) {  .stat-card {    display: flex;    align-items: center;    gap: 1rem;  }  .stat-card__icon {    width: 40px; height: 40px;    flex-shrink: 0;  }  .stat-card__value { font-size: 1.5rem; }}/* 宽容器：水平展开+额外信息 */@container stat-card (min-width: 600px) {  .stat-card {    display: grid;    grid-template-columns: auto 1fr auto;    grid-template-rows: auto auto;    gap: 0.5rem 1.5rem;    align-items: center;  }  .stat-card__icon {    grid-row: 1 / -1;    width: 48px; height: 48px;  }  .stat-card__value { font-size: 2rem; }  .stat-card__trend {    grid-row: 1 / -1;    justify-self: end;  }}

容器查询与媒体查询的协作

容器查询和媒体查询解决不同层级的问题：媒体查询控制页面整体布局（导航栏折叠、侧边栏显隐），容器查询控制组件内部布局。两者配合使用是最佳实践：

/* 页面级布局用媒体查询 */.dashboard-layout {  display: grid;  grid-template-columns: 240px 1fr;}@media (max-width: 768px) {  .dashboard-layout {    grid-template-columns: 1fr;  }  .sidebar { display: none; }}/* 组件级布局用容器查询 */.card-wrapper { container-type: inline-size; }@container (min-width: 400px) {  .stat-card { /* ... */ }}

浏览器兼容性方面，容器查询在Chrome 105+、Firefox 110+、Safari 16+均已支持，覆盖了2024年以来的主流浏览器。对于需要兼容旧浏览器的项目，可以使用container-query-polyfill作为降级方案，但对于大多数现代项目，容器查询已可直接投入生产使用。