CSS Container Queries 与响应式组件治理（2025）

# CSS Container Queries 与响应式组件治理（2025） ## 一、原理与能力 - Container Queries：根据容器尺寸/样式查询应用不同规则（容器尺寸）。 - 对比：区别于媒体查询的视口维度；更适合组件化布局（响应式组件）。 ## 二、实现与策略 - 声明容器：使用 `container-type`/`container-name` 定义查询容器。 - 查询规则：按宽度/高度/样式条件切换样式；控制断点命名。 ## 三、级联与组合 - 级联：避免过深选择器与全局覆盖；使用 BEM/原子化降低冲突（级联）。 - 组合：组件内自适配，容器外不依赖视口；提升复用性（组合）。 ## 四、性能与可访问性 - 性能：控制查询数量与复杂度；避免频繁计算导致卡顿。 - 可访问性：确保在不同尺寸下文字与对比度可读。 ## 注意事项 - 关键词（Container Queries、响应式组件、容器尺寸、级联、组合）与正文一致。 - 分类为“前端/CSS/布局”，不超过三级。 - 策略需在组件库与页面场景中验证。