CSS Container Queries 与响应式组件驱动实践

CSS Container Queries 与响应式组件驱动实践概述容器查询允许根据父容器的尺寸而非视口尺寸来应用样式，解决组件在不同栅格与布局环境下的适配问题。核心概念与参数容器建立：`container-type: inline-size` 或 `size` 以启用尺寸查询。查询语法：`@container (min-width: 480px) { ... }` 作用于建立容器的后代。命名容器：`container-name: card` 配合 `@container card (min-width: ...)` 精准作用。实践示例<section class="grid"> <article class="card"> <h3 class="title">标题</h3> <p class="desc">说明文本</p> </article> </section> <style> .card { container-type: inline-size; container-name: card; } @container card (min-width: 480px) { .title { font-size: 1.25rem; } .desc { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } } @container card (min-width: 720px) { .title { font-size: 1.5rem; } } </style> 验证方法浏览器支持：Chrome 106+、Safari 16.4+、Firefox 110+。测试环境：Windows 11 / macOS 14；Chrome 120+ / Safari 17+。性能指标：组件在不同栅格下布局切换的 `INP` 保持稳定，无长任务阻塞。可维护性：移除媒体查询后组件在嵌套布局中的复用不受视口影响。注意事项仅对建立了容器的后代元素生效，注意层级与封装边界。避免过多阈值导致样式复杂度提升，建议 2–3 个关键断点。与 `:has()`、栅格布局结合以实现状态与尺寸协同。