CSS Container Queries 与容器单元 cqw-cqh 实践

核心价值用容器查询替代全局视口断点，实现组件级响应式。利用 `cqw/cqh/cqmin/cqmax` 单位按容器尺寸进行排版与缩放。提供栅格卡片与媒体对象模式的可复用示例。启用命名容器<section class="card-grid"> <article class="card"> <img class="thumb" src="/img/a.jpg" alt="" /> <div class="body">内容 A</div> </article> <article class="card"> <img class="thumb" src="/img/b.jpg" alt="" /> <div class="body">内容 B</div> </article> </section> .card-grid { container-type: inline-size; container-name: cards; display: grid; gap: clamp(12px, 2cqw, 24px); } .card { display: grid; gap: 1rem; } .thumb { inline-size: 100%; block-size: auto; } /* 在容器宽度达到断点时改变布局 */ @container cards (min-width: 640px) { .card { grid-template-columns: 200px 1fr; align-items: start; } .thumb { inline-size: 200px; } } @container cards (min-width: 960px) { .card { grid-template-columns: 240px 1fr; } .thumb { inline-size: 240px; } } 容器单元应用`cqw/cqh` 分别代表容器宽/高的百分比单位。`cqmin/cqmax` 代表容器的较小/较大维度，有助于做等比元素。.card { padding: clamp(12px, 2cqw, 28px); } .thumb.square { inline-size: 20cqmin; block-size: 20cqmin; border-radius: 4cqmin; } .title { font-size: clamp(14px, 1.8cqw, 20px); } 媒体对象模式<article class="media"> <img class="avatar" src="/img/u.png" alt="" /> <div class="info"> <h3 class="title">标题</h3> <p class="desc">描述文本</p> </div> </article> .media { container-type: inline-size; container-name: media; display: grid; gap: 1rem; } .avatar { inline-size: 16cqmin; block-size: 16cqmin; border-radius: 50%; } .info { display: grid; gap: 0.5rem; } @container media (min-width: 560px) { .media { grid-template-columns: 120px 1fr; align-items: center; } .avatar { inline-size: 120px; block-size: 120px; } } 治理建议为需要响应的组件外层启用 `container-type: inline-size` 并命名，避免与其他容器冲突。优先使用容器断点与容器单位进行内部排版，减少全局媒体查询。结合 `clamp()` 保持在极端容器尺寸下的合理界限。结论容器查询与容器单元构建更健壮的组件级响应式体系，使模块在不同布局环境下保持一致的可读性与比例关系。