cqw 等容器查询相对单位依赖于显式声明的容器类型，若仅使用 container: inline-size（错误 shorthand），浏览器会将其解析为容器名称而非类型，导致容器查询上下文未建立，cqw 退化为视口宽度单位——这正是字体随窗口变宽而持续增大、无视容器 max-width: 500px 的根本原因。
`cqw` 等容器查询相对单位依赖于**显式声明的容器类型**，若仅使用 `container: inline-size`（错误 shorthand），浏览器会将其解析为容器名称而非类型，导致容器查询上下文未建立，`cqw` 退化为视口宽度单位——这正是字体随窗口变宽而持续增大、无视容器 `max-width: 500px` 的根本原因。
在 CSS 容器查询中，cqw（container query width）表示当前容器内容宽度的 1%，其计算基准必须是已成功启用容器查询上下文的元素。而该上下文的建立有严格前提：容器必须通过 container-type 显式声明类型（如 inline-size），或通过完整语法 container: <name> / <type></type></name> 指定类型。
常见的误区是误用 container: inline-size 这一简写形式。根据 CSS Containment Module Level 3 规范，container 是一个双值属性，需同时指定名称与类型（如 container: card / inline-size）。若只写 container: inline-size，浏览器会将 inline-size 解析为容器名称（name），而类型（type）则回退为默认值 normal——这意味着该元素不构成有效的容器查询上下文，所有 cqw、cqh、cqi 等单位将无法获取容器尺寸，转而降级为基于视口（viewport）的等效单位（即行为类似 vw），从而完全脱离容器约束。
✅ 正确做法是使用 container-type 属性单独声明类型：
.container {
container-type: inline-size; /* 关键：启用 inline-size 容器查询上下文 */
max-width: 500px;
background-color: #d5d5d5;
}
p {
font-size: 2cqw; /* 现在 2cqw = 容器内容宽度的 2%，上限为 500px × 2% = 10px */
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
-
container-type: inline-size仅启用内联方向（宽度） 的容器查询；如需块方向支持，需额外添加container-type: block-size或使用container-type: size（同时启用两者，但要求元素具有明确的布局盒）。 - 容器元素必须参与常规文档流且具有可计算的尺寸（避免
display: contents或未设置width/max-width导致尺寸为 0）。 - 浏览器兼容性：Chrome 110+、Firefox 119+、Safari 17.4+ 原生支持；旧版需检查
@supports (container-type: inline-size)进行渐进增强。
总结：cqw 不是魔法单位，它严格依赖容器查询上下文的有效建立。请始终优先使用 container-type 显式声明类型，避免 container 简写带来的隐式命名陷阱——这是确保响应式排版真正“以容器为中心”而非“以视口为中心”的关键一步。
