CSS Container Queries 完全指南：告别媒体查询的组件化时代

媒体查询（Media Queries）统治了响应式设计十多年，但它有一个根本问题：组件只能根据视口大小调整样式，而不能根据自己的容器大小调整。Container Queries 彻底改变了这一点。

一、为什么需要 Container Queries

假设你有一个卡片组件，它可能出现在：

• 首页的三栏布局中（窄容器）
• 详情页的全宽区域（宽容器）
• 侧边栏（中等容器）

用媒体查询，你不得不根据视口猜测容器宽度，经常出错。Container Queries 让组件直接响应自己所在容器的尺寸。

二、基本用法

2.1 定义容器

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

container-type: inline-size 表示这个元素是一个查询容器，浏览器会追踪它的行内尺寸（通常是宽度）。

2.2 编写查询

@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
  }
}

@container card (min-width: 700px) {
  .card__title {
    font-size: 1.5rem;
  }
  .card__image {
    aspect-ratio: 16/9;
  }
}

三、容器查询单位

Container Queries 引入了一组新的 CSS 单位：

| 单位 | 含义 | |------|------| | cqw | 容器宽度的 1% | | cqh | 容器高度的 1% | | cqi | 容器行内尺寸的 1% | | cqb | 容器块级尺寸的 1% |

.card__title {
  font-size: clamp(1rem, 3cqi, 2rem);
}

四、Style Queries（实验性）

除了尺寸查询，CSS 还在推进 Style Queries，可以查询容器的计算样式：

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

目前浏览器支持有限，但前景广阔。

五、实战：自适应导航组件

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

/* 窄容器：垂直堆叠 */
@container (max-width: 300px) {
  .nav {
    flex-direction: column;
  }
  .nav__item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #eee;
  }
}

/* 宽容器：水平排列 + 搜索框 */
@container (min-width: 600px) {
  .nav {
    flex-direction: row;
    align-items: center;
  }
  .nav__search {
    display: block;
    margin-left: auto;
  }
}

六、浏览器兼容性

2026 年主流浏览器已全面支持 Container Queries：

• Chrome 105+
• Firefox 110+
• Safari 16+
• Edge 105+

对于需要兼容旧浏览器的项目，可以使用 @supports 做渐进增强：

@supports (container-type: inline-size) {
  .card-wrapper {
    container-type: inline-size;
  }
}

七、最佳实践

1. **命名容器**：给容器起名字，避免查询匹配到意外的祖先容器
2. **合理设置断点**：根据组件的实际布局需求设置，不要照搬媒体查询的断点
3. **组合使用**：Container Queries 和 Media Queries 并不互斥，页面级布局用媒体查询，组件级用容器查询
4. **性能注意**：容器查询需要浏览器持续追踪容器尺寸，避免在大量元素上使用

Container Queries 是 CSS 近年来最有影响力的特性之一。它让组件真正拥有了自适应能力，是组件化开发的理想搭档。