背景与核心价值

• 响应式传统依赖视口宽度，组件在不同容器中表现不一致、样式耦合度高。
• 容器查询以组件所在容器的尺寸与样式上下文为依据，实现真正的自适应组件。

基础配置：声明容器

.card-grid { container-type: inline-size; container-name: cards; display: grid; gap: 12px; }
.card { border: 1px solid #eee; padding: 12px; }

按容器尺寸自适应

@container cards (min-width: 480px) {
  .card { display: grid; grid-template-columns: 160px 1fr; }
}

@container cards (max-width: 479px) {
  .card { display: block; }
}

多容器与命名

.sidebar { container-type: inline-size; container-name: sidebar; }

@container sidebar (min-width: 320px) {
  .nav-item { display: flex; gap: 8px; }
}

与 @layer 协同治理

@layer components {
  .card { font-size: 14px; }
  @container cards (min-width: 640px) { .card { font-size: 16px; } }
}

设计要点

• 将容器边界与布局网格一同声明，避免查询范围不明确。
• 优先 `inline-size`，必要时使用 `size`（双维度）但注意性能成本。
• 结合语义化命名（`container-name`）减少选择器复杂度与耦合。

验证指标（Chrome 128/Edge 130）

• 组件复用率提升：相同组件在不同区域复用场景覆盖 ≥ 90%。
• CSS 规则缩减：媒体查询规则数减少 25%–40%。
• 稳定性：布局跳动（CLS）在组件切换时保持 ≤ 0.03（P95）。
• 性能：大规模列表下样式计算增加 ≤ 3%（P95）。

回退策略

• 不支持容器查询的环境：保留基础流式布局；通过媒体查询提供最小可用体验。
• 逐步引入：优先对关键组件启用容器查询，确保回退路径明确。

测试清单

• 跨布局容器：同一组件在主内容区与侧栏表现正确。
• 极端尺寸：小到 280px、大到 1200px 容器的断点规则稳定无跳闪。
• 性能观察：大量节点渲染下样式计算时长无显著飙升。

应用场景

• 卡片栅格、导航侧栏、数据表格列折叠、复杂表单的自适应排布。