cqw是容器宽度的1%，基准为最近声明container-type的祖先容器，而vw始终基于视口宽度；cqw需显式设置container-type: inline-size才生效，且须配合clamp()实现稳定流体排版。
什么是 cqw，它和 vw 有什么本质区别
cqw 表示“容器宽度的 1%”，它的计算基准不是浏览器视口，而是**最近的、已声明 container-type 的祖先容器**。而 vw 始终基于视口宽度，哪怕元素被嵌套在 200px 宽的卡片里，10vw 仍可能等于 384px（在 3840px 宽屏幕上）——这显然不是你想要的流体效果。
关键判断：如果你的目标是「让文字/间距随组件自身容器缩放」，而不是随整个屏幕缩放，cqw 就是更精准的选择；用 vw 在微前端或可复用卡片中容易导致排版失控。
必须先声明容器，否则 cqw 不生效
浏览器不会自动把任意父元素当作容器查询上下文。cqw 依赖于 CSS containment 机制，没声明 container-type，单位就退化为 0 或被忽略（不同浏览器表现不一，但都不符合预期）。
- 必须给直接父容器设置
container-type: inline-size（最常用）或size - 不需要
container-name就能使用cqw，命名仅用于@container查询时区分多个容器 - 避免在
display: inline或未设宽高的父元素上声明，containment 可能失效
示例：
.card {
container-type: inline-size;
width: 100%;
max-width: 600px;
}
<p>.card-title {
font-size: clamp(1rem, 4cqw, 1.5rem); /<em> 最小 1rem，最大 1.5rem，中间按容器宽度 4% 缩放 </em>/
}</p>
cqw 和 clamp() 配合才是流体排版主力
单独用 2cqw 做 padding 没问题，但做字体大小时容易过小或过大——cqw 是纯线性单位，缺乏边界控制。真正稳定的流体排版靠的是 clamp(min, preferred, max) + cqw 作为 preferred 值。
-
clamp(1.1rem, 3.2cqw, 1.8rem)：保证在窄容器中不低于1.1rem，宽容器中不超过1.8rem，中间段随容器宽度平滑变化 - 系数（如
3.2）需要实测调整：容器越宽，系数越小；越窄，系数越大（否则小屏下字太小） - 避免用
cqw控制行高（line-height），它不接受容器单位，会直接报错或忽略
容易被忽略的兼容性和回退方案
Firefox 110+、Safari 16.4+、Chrome 110+ 支持 cqw，但 Edge 105+ 仅部分支持（需确认是否开启实验性 flag）。更重要的是：CSS 自定义属性无法动态赋值 cqw（--gap: 2cqw 无效），也不能在 JS 的 getComputedStyle 中读取计算后的 cqw 值。
- 安全回退写法：
font-size: 1.25rem; font-size: clamp(1rem, 3.5cqw, 1.75rem);，老浏览器用固定值 - 不要在
@keyframes或伪元素::before的content中尝试cqw，目前无浏览器支持 - 如果容器本身是 flex 或 grid 子项且未设明确尺寸，
cqw计算可能不稳定——加min-width: 0或width: 100%显式约束
真正难的不是写对语法，而是判断「这个组件是否值得用 cqw」：如果它只在一种固定宽度区域出现，rem 或 % 更轻量；只有当它要跨多种容器尺寸复用（比如仪表盘卡片、CMS 组件库），cqw 的价值才不可替代。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
