先记住这个答案
1vw 是视口宽度的百分之一，1cqw 是最近合格宽度查询容器宽度的百分之一。卡片在主栏和侧栏复用时，cqw 能让内部间距随卡片空间变化，而 vw 在同一屏上给两张卡相同的视口基准。cqi 按行内轴计算，在竖排书写模式下未必等于物理宽度。找不到合格容器时，容器单位会退回对应的小视口单位。
1vw是视口宽度的百分之一1cqw是查询容器宽度的百分之一- 容器单位适合组件局部伸缩
- 找不到容器时有小视口回退
侧栏卡片为什么不适合纯视口单位
桌面视口很宽，但侧栏只有一小块空间。若给卡片标题写 font-size: 2vw，标题可能相对侧栏过大；主栏里同样的卡片却又显得偏小。容器单位让它跟实际可用空间走。
.card { container-type: inline-size; }
.card__content { padding: clamp(12px, 3cqw, 24px); }
.card__title { font-size: clamp(18px, 5cqw, 28px); }卡片变宽时内边距和标题会平滑增长；clamp() 给它们设了下限与上限，避免极窄或极宽容器产生难读的尺寸。纯 cqw 字体可能随容器过度缩小，不应无条件使用。
容器需要在目标元素的祖先上设置。若把 container-type 写到标题自己身上，标题的 cqw 不会因此直接按自己的宽度计算。
选择基准先看设计意图
整页的全屏装饰或与窗口宽度成比例的边距可用 vw。组件内的图片尺寸、卡片间距若要随父容器变化，可用 cqw 或 cqi。若需求是固定可读尺寸，普通 rem 可能更合适。
还要检查轴向。cqh 需要能查询块轴尺寸的合格容器；只设 inline-size 类型并不等于同时提供高度基准。单位选错时页面仍可能渲染，但回退到小视口尺寸会让结果看起来“有值却不对”。
计算一下更容易记：视口宽 1200px 时，2vw 始终是 24px；同一页面里主栏卡片宽 600px、侧栏卡片宽 240px，若各自是最近的宽度查询容器，2cqw 分别是 12px 和 4.8px。这解释了为什么单独用容器单位可能把侧栏文字压得太小，也解释了 clamp() 的下限不是装饰，而是可读性保护。
容易答错的地方
- 认为
cqw总等于卡片自己的宽度 - 它找的是目标元素的合格祖先容器。更近的容器出现后，基准也会变化。
- 认为容器单位一定比
vw好 - 全屏效果本来就应跟视口变化；容器单位适合局部组件，不是所有尺寸的替代品。
面试官还会怎么问？
cqw 找不到容器会怎样？
会退回到相应的小视口单位，而不是变成零。需要稳定外观时给普通长度回退。
cqw 与 cqi 有什么区别？
cqw 指物理宽度，cqi 指书写模式中的行内尺寸；横排常一致，竖排可能不同。
为什么要给字体加 clamp()？
组件可能被放进极窄侧栏或宽屏主栏，给字号上下限能守住可读性。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。