CSS如何根据容器宽度自动调整盒子内字号：结合Container-queries容器查询

必须为盒子设置 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+）的兼容现状，别试图“兜底”到媒体查询逻辑里。