CSS 容器查询彻底指南：组件级响应式设计的终极方案

前端工程（更新于 2026年6月2日）

容器查询：响应式设计的范式转移

传统媒体查询基于视口宽度，容器查询基于父容器宽度——这看似微小的差异，彻底改变了组件的复用方式。

维度 媒体查询 容器查询
参照物 视口（viewport） 父容器（container）
复用性 组件依赖页面布局 组件完全独立
侧边栏场景 需额外断点 自动适配
嵌套组件 无法感知父级 天然支持
浏览器支持 全部 Chrome 105+, Firefox 110+, Safari 16+

基础语法

定义容器

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

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

container-type 取值：

值 含义 可查询维度
inline-size 行内方向容器 宽度
size 双轴容器 宽度 + 高度
normal 非容器（默认） 无

编写容器查询

@container card (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  .card-title {
    font-size: 1.5rem;
  }
}

@container card (max-width: 399px) {
  .card {
    flex-direction: column;
  }
  .card-title {
    font-size: 1.2rem;
  }
}

实战案例：自适应卡片组件

HTML 结构

<div class="sidebar">
  <div class="card-container">
    <article class="card">
      <img class="card-img" src="photo.jpg" alt="">
      <div class="card-body">
        <h3 class="card-title">文章标题</h3>
        <p class="card-desc">文章摘要内容</p>
        <span class="card-tag">前端</span>
      </div>
    </article>
  </div>
</div>

<div class="main-content">
  <div class="card-container">
    <article class="card">
      <!-- 同样的卡片组件 -->
    </article>
  </div>
</div>

CSS 实现

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

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

.card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0.5rem;
}

/* 容器宽度 > 400px：水平布局 */
@container card (min-width: 400px) {
  .card {
    flex-direction: row;
    align-items: center;
  }

  .card-img {
    width: 200px;
    aspect-ratio: 1;
    flex-shrink: 0;
  }

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

/* 容器宽度 > 600px：大卡片布局 */
@container card (min-width: 600px) {
  .card-img {
    width: 280px;
  }

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

  .card-desc {
    -webkit-line-clamp: 3;
  }
}

效果：同一个 .card 组件，放在 300px 侧边栏自动竖排，放在 700px 主区域自动横排——无需任何媒体查询。

容器查询单位

类似 vw/vh，但参照容器而非视口：

单位 参照 等价关系
cqw 容器宽度的 1% 1cqw = 容器宽度 × 1%
cqh 容器高度的 1% 1cqh = 容器高度 × 1%
cqi 容器行内尺寸的 1% 等于 cqw（水平书写模式）
cqb 容器块尺寸的 1% 等于 cqh（水平书写模式）
cqmin min(cqi, cqb) 取较小值
cqmax max(cqi, cqb) 取较大值 
.card-title {
  font-size: clamp(1rem, 3cqw, 2rem);
  padding: 2cqw;
}

实战案例：响应式导航栏

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

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* 窄容器：汉堡菜单 */
@container nav (max-width: 500px) {
  .nav-links {
    display: none;
  }
  .nav-hamburger {
    display: block;
  }
}

/* 中等容器：水平导航 */
@container nav (min-width: 501px) {
  .nav-links {
    display: flex;
    gap: 1rem;
  }
  .nav-hamburger {
    display: none;
  }
}

/* 宽容器：导航 + 搜索框 */
@container nav (min-width: 800px) {
  .nav-search {
    display: flex;
  }
}

与媒体查询的协同

容器查询不是替代媒体查询，而是分工协作：

/* 媒体查询：处理页面级布局 */
@media (min-width: 1024px) {
  .layout {
    grid-template-columns: 280px 1fr;
  }
}

/* 容器查询：处理组件级布局 */
@container card (min-width: 400px) {
  .card {
    flex-direction: row;
  }
}
场景 用什么
页面整体布局切换 媒体查询
组件内部自适应 容器查询
全局字体缩放 媒体查询
组件内文字随容器缩放 容器查询单位

容器样式查询

CSS Container Query Level 3 引入了样式查询，可以基于容器自定义属性值来切换样式：

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

.card-container.dark {
  --theme: dark;
}

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

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

性能优化

避免过度嵌套

/* 不推荐：多层容器嵌套 */
.outer { container: outer / inline-size; }
.middle { container: middle / inline-size; }
.inner { container: inner / inline-size; }

/* 推荐：只在需要自适应的层级设置容器 */
.card-wrapper { container: card / inline-size; }

容器尺寸计算

容器查询的尺寸计算不包含子元素的溢出内容，但包含 padding 和 border。设置 box-sizing: border-box 确保一致行为。

降级策略

/* 基础样式：移动端优先 */
.card {
  flex-direction: column;
}

/* 容器查询增强 */
@supports (container-type: inline-size) {
  .card-container {
    container: card / inline-size;
  }
  @container card (min-width: 400px) {
    .card {
      flex-direction: row;
    }
  }
}

/* 不支持时的媒体查询回退 */
@supports not (container-type: inline-size) {
  @media (min-width: 768px) {
    .card {
      flex-direction: row;
    }
  }
}

浏览器兼容性（2026 年）

浏览器 容器查询 容器查询单位 样式查询
Chrome 105+ ✅ ✅ ✅ (117+)
Firefox 110+ ✅ ✅ ❌
Safari 16+ ✅ ✅ ✅ (17+)
Edge 105+ ✅ ✅ ✅

结论：容器查询已获得主流浏览器全面支持，可以在生产环境放心使用。样式查询作为增强功能，建议配合 @supports 渐进使用。

本站提供浏览器本地工具，免注册即可试用 →

#CSS#容器查询#响应式设计#组件化