CSS 容器查询单位
CSS容器查询单位：cqw/cqh/cqi/cqb（相对于查询容器尺寸）、cqmin/cqmax、与视口单位(vw/vh)对比、容器查询+容器单位实现组件自适应排版 · 难度：入门 · +10XP
CSS 容器查询单位 —— cqw/cqh 让组件自适应
vw和vh是相对于视口的单位。但如果组件放在一个侧边栏里，vw就不适用了。容器查询单位（cqw、cqh等）是相对于组件自己的容器的，让组件真正做到自我感知。
基本用法
.card-container {
container-type: inline-size; /* 声明为容器 */
}
.card {
font-size: clamp(1rem, 5cqi, 2rem); /* 5%的容器内联尺寸 */
padding: 3cqi; /* 容器宽度的3% */
}容器查询单位一览
| 单位 | 相对于 |
|---|---|
| cqw | 容器宽度的1% |
| cqh | 容器高度的1% |
| cqi | 容器内联尺寸的1%（类似逻辑属性版宽度） |
| cqb | 容器块尺寸的1%（类似逻辑属性版高度） |
| cqmin/cqmax | 容器宽高中的较小/较大值 |
动手练习
- 基础练习：做一个响应式卡片——用cqw设置字体大小和间距，卡片放大字自动变大。
- 进阶应用：做一组仪表盘小部件——每个部件根据自身容器大小自动调整内部布局。
- 项目实战：把你网站的侧边栏组件改用cq单位，实现真正的组件级响应式。