CSS Container Queries

学习@container · 难度：高级 · +15XP

CSS Container Queries 容器查询

容器查询（Container Queries）是 CSS 近年来最重要的新特性之一。与媒体查询基于视口不同，容器查询允许组件根据自身容器的尺寸改变样式，实现真正的组件级响应式设计。

为什么需要容器查询

传统媒体查询的问题：一个组件在不同布局中（侧边栏 vs 主内容区）容器宽度不同，但媒体查询只能根据视口宽度判断。容器查询解决了这一问题。

/* 媒体查询 — 只能根据视口 */
@media (min-width: 768px) { .card { ... } }
/* 容器查询 — 根据所在容器 */
@container (min-width: 400px) { .card { ... } }

基本使用

容器查询需要两步：定义容器和编写查询。

/* 步骤一：定义容器上下文 */
.card-wrapper {
  container-type: inline-size;
  container-name: card-container;
  /* 简写：container: card-container / inline-size; */
}
/* 步骤二：根据容器编写样式 */
@container card-container (min-width: 400px) {
  .card {
    display: flex;
    gap: 20px;
  }
  .card img {
    width: 40%;
  }
}
@container card-container (min-width: 600px) {
  .card {
    font-size: 1.2em;
  }
}

container-type 详解

值	说明
`inline-size`	仅查询内联尺寸（宽度，横向书写模式下）
`size`	同时查询内联尺寸和块尺寸（宽和高）
`normal`	默认值，不作为查询容器

container-name 命名

/* 命名容器 */
.sidebar {
  container-name: sidebar;
  container-type: inline-size;
}
/* 使用指定容器 */
@container sidebar (max-width: 300px) {
  .nav-item { font-size: 0.9em; }
}

容器查询长度单位

单位	相对于
`cqw`	容器宽度的 1%
`cqh`	容器高度的 1%
`cqi`	容器内联尺寸的 1%
`cqb`	容器块尺寸的 1%
`cqmin`	容器较小尺寸的 1%
`cqmax`	容器较大尺寸的 1%

/* 容器单位使用 */
.card-title {
  font-size: clamp(1rem, 5cqi, 2rem);
  /* 字体根据容器宽度自动调整 */
}

实用示例 — 自适应卡片

<div class="card-grid">
  <div class="card-wrapper">
    <div class="card">
      <img src="photo.jpg" alt="">
      <div class="card-body">
        <h3>标题</h3>
        <p>描述文字...</p>
      </div>
    </div>
  </div>
</div>
<style>
.card-wrapper {
  container-type: inline-size;
}
.card {
  display: block;
  padding: 16px;
}
@container (min-width: 350px) {
  .card {
    display: flex;
    gap: 16px;
    align-items: center;
  }
  .card img {
    width: 150px;
    flex-shrink: 0;
  }
}
@container (min-width: 500px) {
  .card img { width: 200px; }
  .card h3 { font-size: 1.5em; }
}
</style>

不支持时的回退

/* 基础样式 — 所有浏览器 */
.card { display: block; }
/* 容器查询增强 — 支持的浏览器 */
@supports (container-type: inline-size) {
  .card-wrapper {
    container-type: inline-size;
  }
  @container (min-width: 400px) {
    .card { display: flex; }
  }
}

容器查询 vs 媒体查询选择指南

页面级布局：使用媒体查询（导航栏、侧边栏、内容区）
组件内部样式：使用容器查询（卡片、列表项、小部件）
两者结合：页面结构用媒体查询，组件细节用容器查询

容器查询是响应式设计的未来。它让组件真正做到"一次编写，随处使用"，无论放在什么容器中都能自动适配。这是 CSS 发展史上具有里程碑意义的特性。