本文介绍如何利用 CSS 容器查询长度单位（如 10cqh）将子元素字体大小精确设为父容器高度的百分比，无需 JavaScript，且不依赖父元素的 font-size 设置。
本文介绍如何利用 css 容器查询长度单位（如 `10cqh`）将子元素字体大小精确设为父容器高度的百分比，无需 javascript，且不依赖父元素的 `font-size` 设置。
在传统 CSS 中，em、rem、% 等相对单位均基于字体上下文（如父元素或根元素的 font-size），而 vh/vmin 则基于视口而非父容器——因此当目标是“让 <span></span> 的字号始终等于其直接父 <div> 高度的 10%”时，这些单位均无法直接满足需求。<p>现代 CSS 提供了更精准的解决方案：<strong>容器查询（Container Queries）及其专属长度单位</strong>。关键在于启用容器类型并使用 <code>cqh（container query height）单位——它定义为“容器块方向尺寸的 1%”，对常规流中具有明确高度的 <div> 而言，即等价于 <code>height 的 1%。
✅ 正确实现步骤如下：
为父容器声明
container-type: size
这是启用容器查询的前提，表示该元素可作为尺寸查询的上下文（注意：无需指定container-name，默认匿名容器即可）；在子元素中使用
cqh单位设置font-size
例如font-size: 10cqh表示“字体大小 = 父容器高度 × 10%”。
完整示例代码：
div {
height: 30vh; /* 父容器高度（可为任意有效长度值） */
width: 100vh;
background-color: #f0f0f0;
container-type: size; /* ✅ 必须声明，否则 cqh 无效 */
margin-bottom: 1em;
}
span {
font-size: 10cqh; /* ✅ 字体大小 = 父 div 高度的 10% */
}
span.big {
font-size: 20cqh; /* 可灵活缩放，如需更大字号 */
}
<div> <span>Example text</span> </div> <div> <span class="big">Example text</span> </div>
⚠️ 注意事项：
-
浏览器兼容性：
container-type与cqh等单位已在 Chrome 105+、Firefox 110+、Safari 16.4+ 中稳定支持（截至 2024 年），旧版浏览器需降级处理（如@supports检测 +vh回退）； -
容器必须有明确尺寸：若父
div高度由内容撑开（height: auto），则cqh将按计算后的实际高度生效，仍可靠；但若高度完全未定义且无约束，容器查询可能无法正确解析； -
不依赖
font-size继承：cqh直接锚定容器几何尺寸，彻底规避了em/%对父元素字体设置的依赖，完美契合本题原始约束。
总结：10cqh 是当前唯一纯 CSS、语义清晰、响应式友好的解决方案，标志着 CSS 布局能力从“视口中心”迈向“容器中心”的重要演进。
