CSS 容器查询实战：告别媒体查询的响应式新时代

容器查询（Container Queries）让组件按「父级给它的可用空间」决定样式，而不是按整个视口宽度；只要在父元素上加一行 `container-type: inline-size`，子元素就能用 `@container` 写断点，Chrome 105+ / Safari 16+ / Firefox 110+ 已原生支持，自 2023 年起属于可放心上生产的能力。

最小可用示例：两行 CSS 跑起来

结论：容器查询的最小用法是「父级声明容器类型 + 子级写 @container 规则」，不需要构建工具、不需要 JS。

.card-wrap {
  container-type: inline-size;   /* 按宽度建立查询容器 */
  container-name: card;          /* 起个名字，便于跨层指定 */
}

@container card (min-width: 420px) {
  .card { display: grid; grid-template-columns: 120px 1fr; gap: 16px; }
}

@container card (min-width: 720px) {
  .card__title { font-size: 1.5rem; }
}

`container-type: inline-size` 的含义是「只在行内方向（横向书写模式下即宽度）建立尺寸包含」，所以它不会把元素高度锁死——高度依然由内容撑开，这点和下面要说的 `size` 有本质区别。

最容易踩的坑：容器不能查询自己

结论：`@container` 只作用于容器的后代元素，容器自身无法被自己的规则命中。

这意味着「让卡片根据自己的宽度变成两栏」必须换个写法：给卡片外包一层 wrapper 当容器，卡片作为其后代被查询。很多人第一次写会直接把 `container-type` 加在 `.card` 上又去查 `.card`，结果样式毫无反应，就是这个原因。

另外，不带名字的 `@container` 命中最近的祖先查询容器，带名字的（`@container card (...)`）命中最近的同名容器。嵌套卡片场景下建议一律显式命名，避免被内层容器截胡。

container-type 三个取值怎么选

结论：绝大多数场景用 `inline-size`；只有需要按高度做响应时才用 `size`，且必须自己给死尺寸。

• `normal`：默认值，不建立尺寸查询容器，但仍可参与样式查询。
• `inline-size`：推荐默认选择。只包含行内轴，高度照常由内容决定。
• `size`：两个方向都做尺寸包含，元素尺寸彻底脱离内容——宽度高度都得自己写死（如 `width: 100%; height: 400px`），否则高度会塌成 0。适合图表画布、地图容器这类固定尺寸场景。

补充一个冷门副作用：尺寸包含会让元素成为绝对定位与 `position: fixed` 后代的包含块。如果容器内有固定定位的弹层，它会被限定在这个容器里，而不是相对视口。遇到「弹窗位置诡异」先查这个。

容器查询单位：cqw / cqi 比 vw 更好用

结论：容器查询单位是流式排版里比视口单位更合适的选择，因为它的参考系是组件而不是屏幕。

`1cqw` 等于容器宽度的 1%，`cqi` 是行内方向（横向书写模式下等于 cqw），此外还有 `cqh`、`cqb`、`cqmin`、`cqmax`。典型用法：

.card__title {
  font-size: clamp(1rem, 4cqw, 1.6rem);
}

同一张卡片放在 300px 宽的侧栏和 900px 宽的主区域，字号自动适配，不需要写两套媒体查询，也不会像 `vw` 那样在窄屏侧栏里过大、宽屏里过小。

和媒体查询怎么配合

结论：媒体查询管「页面级布局骨架」，容器查询管「组件级自适应」，两者是分工不是替代。

把页面从单栏切到侧栏 + 主区、控制导航栏折叠、切换主题暗色模式，这些仍然属于视口或全局层面的事，继续用媒体查询。而卡片、列表项、表格、按钮组这些会被复用到不同宽度容器里的组件，改用容器查询。

这么拆的好处是组件真正做到了「一次编写、到处适配」：同一个卡片组件放进抽屉、弹窗、主区都不需要父级传 props 或加 class 变体。

兼容与降级方案

结论：把容器查询当作渐进增强，先写单列基础样式，再用 `@supports` 包一层增强。

.card { display: block; }                 /* 基础：老浏览器看到的是这个 */

@supports (container-type: inline-size) {
  .card-wrap { container-type: inline-size; container-name: card; }
  @container card (min-width: 420px) {
    .card { display: grid; grid-template-columns: 120px 1fr; }
  }
}

注意 `@supports` 在这里其实可选（不识别的 `@container` 规则会被老浏览器整条忽略），但包起来能让降级意图更清晰。核心原则是：基础样式必须是能用的完整版，容器查询只负责在大空间里锦上添花。

收束

容器查询解决的是「组件不知道自己会被放进多宽的容器」这个长期痛点：`container-type: inline-size` 建立查询容器，`@container` 写断点，`cqw` 系列单位做流式尺寸，配合 `container-name` 避免嵌套截胡。落地时记住三条——容器查不了自己、`size` 会锁死高度、`fixed` 后代会被容器捕获。实践顺序建议：先拿卡片类组件试点，盯住跨层命名和降级样式，跑通之后再往表格和列表铺开。