Container Queries 完全指南：让组件自己决定怎么展示

为什么你没听说过 Container Queries？

如果你还在用 @media 写响应式，那你可能错过了近两年 CSS 最大的变革。

Container Queries（容器查询） 允许组件根据自身容器的尺寸来调整样式，而不是根据整个视口。这意味着 —— 你写的组件终于可以真正"自适应"了。

传统 Media Query 的痛点

假设你写了一个卡片组件，它在侧边栏（300px）和主内容区（800px）都会被使用：

/* 传统的做法——只能看视口 */
@media (max-width: 768px) {
  .card { flex-direction: column; }
}

问题很明显：侧边栏里的卡片不管视口多大，它本身就很窄，应该用竖排布局。但 @media 不知道你的卡片在什么地方，它只看浏览器窗口。

Container Queries 怎么做

首先，给容器定义一个 containment context：

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

然后查询容器本身的宽度：

@container card (max-width: 400px) {
  .card {
    flex-direction: column;
    gap: 8px;
  }
  .card-image {
    width: 100%;
    border-radius: 12px 12px 0 0;
  }
}

@container card (min-width: 600px) {
  .card {
    gap: 24px;
    padding: 24px;
  }
  .card-image {
    width: 200px;
    flex-shrink: 0;
  }
}

现在你的卡片组件无论是放在侧边栏还是主内容区，都能根据自己实际占用的空间调整布局。这才是真正意义上的"组件级响应式"。

一个真实场景：仪表盘卡片组

假设你有一个仪表盘，用户可以拖拽调整面板大小。用传统方案几乎无解——你不可能为每一个可能的宽度写一个媒体查询。用 Container Queries 只需一次定义：

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

@container (min-width: 500px) {
  .stat-value { font-size: 3rem; }
  .stat-chart { display: block; }
}

@container (max-width: 250px) {
  .stat-value { font-size: 1.2rem; }
  .stat-label { font-size: 0.7rem; }
  .stat-chart { display: none; }
}

浏览器兼容

好消息：2026年所有主流浏览器已全面支持。你不需要任何 polyfill。

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

和 @media 一起使用

Container Queries 不是替代品，而是互补：

• @media：页面级布局（导航栏切换、全局字体大小）
• @container：组件级布局（单个卡片、面板、列表中每一项）

两者配合使用，才能真正做到从页面到组件的完整响应式覆盖。

Container Query 长度单位

配合 Container Queries，CSS 还新增了容器相对单位：

• cqw：容器宽度的 1%
• cqh：容器高度的 1%
• cqmin：容器宽高中较小值的 1%
• cqmax：容器宽高中较大值的 1%

@container (min-width: 400px) {
  .card-title { font-size: clamp(1rem, 5cqw, 1.5rem); }
}

这样一来，文字的缩放完全基于容器大小，不受视口变化影响。

总结

如果你还没在项目里用过 Container Queries，现在就是最好的时机。从最简单的卡片组件开始，感受一下"组件自己知道该怎么展示"的自由。

告别写几十个 @media 断点的日子吧。

本文为作者原创，未经授权禁止转载、洗稿、搬运。如需引用请保留原文链接。