CSS 容器查询：布局的新革命

CSS 容器查询布局的新革命让组件根据容器大小自适应而不是仅仅依赖视口。一、容器查询的意义作为一名追求像素级还原的 UI 匠人我深知响应式设计的痛点——传统的媒体查询只能基于视口尺寸而无法感知组件所在容器的大小。容器查询Container Queries彻底改变了这一点让我们能够创建真正模块化的、自包含的响应式组件。二、基础用法1. 定义容器.card-container { container-type: inline-size; /* 或者使用 size 同时监听内联和块级尺寸 */ /* container-type: size; */ container-name: card; }2. 使用容器查询container card (min-width: 300px) { .card-content { display: flex; gap: 1rem; } .card-image { flex: 0 0 120px; } .card-body { flex: 1; } } container card (min-width: 400px) { .card-title { font-size: 1.25rem; } .card-description { display: block; } }三、完整示例div classcard-container div classcard img srcproduct.jpg altProduct classcard-image div classcard-body h3 classcard-title产品标题/h3 p classcard-description这是产品描述会根据容器大小显示或隐藏。/p div classcard-actions button查看详情/button button加入购物车/button /div /div /div /div.card-container { container-type: inline-size; container-name: card; width: 100%; max-width: 500px; } .card { background: white; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); overflow: hidden; } .card-image { width: 100%; height: 200px; object-fit: cover; } .card-body { padding: 1rem; } .card-title { font-size: 1rem; margin: 0 0 0.5rem 0; } .card-description { display: none; color: #666; margin: 0 0 1rem 0; } .card-actions { display: flex; gap: 0.5rem; flex-direction: column; } .card-actions button { padding: 0.5rem 1rem; border: none; border-radius: 6px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; cursor: pointer; } /* 容器查询 */ container card (min-width: 300px) { .card { display: flex; } .card-image { flex: 0 0 120px; height: auto; } .card-actions { flex-direction: row; } } container card (min-width: 400px) { .card-title { font-size: 1.25rem; } .card-description { display: block; } .card-image { flex: 0 0 160px; } }四、容器查询单位.card { padding: 4cqi; /* 容器内联尺寸的 4% */ font-size: clamp(1rem, 3cqi, 1.25rem); } /* 其他容器单位 - cqw: 容器宽度的 1% - cqh: 容器高度的 1% - cqi: 容器内联尺寸的 1% - cqb: 容器块级尺寸的 1% - cqmin: cqi 和 cqb 中的较小值 - cqmax: cqi 和 cqb 中的较大值 */五、嵌套容器.outer-container { container-type: inline-size; container-name: outer; width: 80%; } .inner-container { container-type: inline-size; container-name: inner; width: 60%; } container outer (min-width: 500px) { /* 外层容器的查询 */ } container inner (min-width: 300px) { /* 内层容器的查询 */ }六、性能考量容器限制避免过度嵌套容器查询频率减少复杂的容器查询规则浏览器支持提供降级方案七、最佳实践模块化设计每个组件都应该是自包含的渐进增强在不支持容器查询的浏览器中提供基础布局命名规范使用有意义的 container-name容器查询让组件有了自己的响应式大脑不再只是视口的奴隶。#css #container-queries #responsive-design #frontend #layout