必须为盒子设置 container-type: inline-size，否则 @container 和 cqw 均静默失效；cqw 仅在 inline-size 容器内有效，需配合 clamp() 使用，且无降级方案。
必须给盒子设 container-type: inline-size，否则 @container 和 cqw 都不生效——浏览器静默忽略，连警告都没有。
为什么 @container 里改 font-size 没反应
常见错误现象：写了 @container (min-width: 400px) { .text { font-size: 1.5rem; } }，但字体完全不变。
- 父容器没加
container-type: inline-size——这是硬性前提，缺一不可 - 用了
em或rem单位：例如font-size: 1.2em，它仍按根字体算，和容器无关 - 父容器宽度由内容撑开（如
width: max-content），导致实际可查询宽度为0px，@container根本不触发 - 把
container-type加在:root或body上——这两个元素默认不是格式化上下文，多数情况失效
cqw 单位怎么用才真正“随容器变”
cqw 表示“容器宽度的 1%”，但它只在被声明为容器的元素内部有效。一旦漏掉 container-type，cqw 就退化成 vw（按视口算）。
- 正确写法：
font-size: clamp(0.875rem, 2.5cqw, 2rem);—— 最小值、弹性值、最大值都明确，且中间用cqw - 不要混用：
clamp(1rem, 50%, 2rem)无效，%在font-size中不合法 - 避免纯
cqw：font-size: 3cqw在极窄容器下可能小到看不见，clamp()是安全底线 -
cqw只响应inline-size类型容器；若设的是container-type: size，需同时保证高度变化才能触发，实用性低
Flex/Grid 子项也能当容器用，但要注意布局压缩
想让卡片内的文字随卡片自身宽度缩放？可以把 container-type: inline-size 直接加在卡片元素上（即 Flex/Grid 的直接子项），但容易踩坑：
- 如果卡片是
flex-item且没设min-width，父 Flex 容器可能把它压扁，查到的宽度远小于视觉宽度 - 不要给
display: contents或display: none的元素设container-type，它会失效 - 卡片内文字用
clamp(0.75rem, 2.2cqw, 1.5rem)，比写死几档@container更平滑，也少写规则 - 若必须用
@container控制多级样式（比如窄时左对齐+红字，宽时居中+加粗），记得命名隔离：container-name: card+@container card (max-width: 360px)
最易被忽略的一点：容器查询没有降级方案。没有 polyfill 能模拟它的行为，@supports (container-type: inline-size) 检测只能帮你隐藏规则，不能补功能。生产环境必须接受 Safari/Chrome/Firefox（119+）的兼容现状，别试图“兜底”到媒体查询逻辑里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
