CSS Container Queries 容器查询：组件自适应与布局治理实践

# 背景与核心价值 - 响应式传统依赖视口宽度，组件在不同容器中表现不一致、样式耦合度高。 - 容器查询以组件所在容器的尺寸与样式上下文为依据，实现真正的自适应组件。 # 基础配置：声明容器 ```css .card-grid { container-type: inline-size; container-name: cards; display: grid; gap: 12px; } .card { border: 1px solid #eee; padding: 12px; } ``` # 按容器尺寸自适应 ```css @container cards (min-width: 480px) { .card { display: grid; grid-template-columns: 160px 1fr; } } @container cards (max-width: 479px) { .card { display: block; } } ``` # 多容器与命名 ```css .sidebar { container-type: inline-size; container-name: sidebar; } @container sidebar (min-width: 320px) { .nav-item { display: flex; gap: 8px; } } ``` # 与 @layer 协同治理 ```css @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 容器的断点规则稳定无跳闪。 - 性能观察：大量节点渲染下样式计算时长无显著飙升。 # 应用场景 - 卡片栅格、导航侧栏、数据表格列折叠、复杂表单的自适应排布。