必须为父容器显式设置 container-type: inline-size（或 container: / inline-size），否则所有容器查询均无效；@container 规则须置于该容器后代的选择器作用域内，且推荐使用 cqw/cqh 单位替代 vw 实现真正容器响应式缩放。
直接用 container-type: inline-size 告诉浏览器“我要按容器响应”
这是最根本的一步，不加这句，后续所有容器查询都无效。必须显式给父容器设 container-type: inline-size（或简写 container: / inline-size），它才具备“被查询”的能力。注意：inline-size 指宽度方向，block-size 才管高度；别错用成 size（需同时满足宽高条件，触发更苛刻）。常见错误是只写了 @container 规则却忘了在父元素上声明类型，结果样式完全不生效。
@container 查询必须写在容器内部作用域里，不能提前提到全局
和 @media 不同，@container 规则必须放在 CSS 文件中、且其选择器匹配的元素必须是已声明 container-type 的容器的后代。例如：你不能把 @container (min-width: 400px) { .title { font-size: 1.2rem; } } 写在全局顶层，除非 .title 真的在某个带 container-type 的父元素内部。否则浏览器直接忽略整条规则。实际项目中常因结构嵌套深、命名不一致，导致选择器没命中——建议用浏览器开发者工具的“Layout”面板确认目标元素是否被标记为 container。
字体大小用 cqw 单位比 clamp() + vw 更准确
虽然 clamp(1rem, 4vw, 1.5rem) 看似能缩放，但 vw 始终基于视口，不是容器。真正按容器宽度缩放，请用容器查询单位：cqw（1% 容器宽度）、cqh（1% 容器高度）。例如：font-size: calc(1rem + 0.5cqw); 或 padding: 1cqw;。这些单位只在 @container 块内有效，且会随容器尺寸实时重算。对比发现：当 flex 子项宽度从 300px 缩到 200px 时，4vw 可能几乎不变（视口没动），而 0.5cqw 会从 1.5px 降到 1px，响应精准得多。
Flex 子项上设 font-size 时，clamp() 必须配合容器查询才可靠
很多人在 flex 子项上直接写 font-size: clamp(1rem, 4vw, 1.5rem);，指望它随子项宽度变化——但失败率很高。原因：子项宽度由 flex 分配决定，vw 仍锚定视口；且 clamp() 本身不感知父容器尺寸。正确做法是两步：① 给 flex 容器（不是子项）设 container-type: inline-size；② 在子项上用 @container 套 clamp() 或直接用 cqw。例如：
.card { flex: 1; min-width: 200px; }
.card-container { container-type: inline-size; }
.card h2 { font-size: clamp(1rem, 2cqw, 1.4rem); } 这里 2cqw 表示“容器宽度的 2%”，才是真正绑定子项实际渲染宽度的依据。
容易被忽略的是：容器查询依赖渲染流程中的 layout 阶段，如果容器高度由内容撑开、且内容加载异步（如图片、API 数据），首次计算时容器可能还没确定尺寸，导致样式延迟应用。上线前务必在低网速下测试首屏卡片的字体切换是否卡顿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
