CSS Container Queries 组件级响应式布局实战

CSS Container Queries 组件级响应式布局实战概述容器查询让组件依据所在父容器尺寸而非视口断点进行响应式适配，提升在复合布局中的稳定性。核心概念与参数启用容器：`container-type: inline-size` 或 `container-type: size`。查询语法：`@container (min-width: 480px) { ... }`。命名容器：`container-name: card` 并用 `@container card (...)` 精确匹配。特性检测：`CSS.supports('container-type: inline-size')`。实践示例<style>

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

@container (min-width: 480px) {

.card { display: grid; grid-template-columns: 160px 1fr; gap: 16px; }

}

</style>

<article class="card">

<img src="cover.jpg" alt="封面" />

<div>

<h2>标题</h2>

<p>摘要...</p>

</div>

</article>

验证方法布局一致性：嵌套栅格与侧栏环境下保持组件自洽。维护性：在设计系统中以容器断点替代全局断点，减少样式耦合。性能：观察重排与重绘次数，避免因频繁尺寸变化造成抖动。注意事项谨慎在深层嵌套场景启用过多容器，控制计算开销。与媒体查询并存，分工清晰：视口策略 + 容器策略。保持无障碍与语义结构，不以视觉为唯一驱动。