本文介绍如何利用 CSS 容器查询长度单位 cqh，纯 CSS 实现子元素（如 ）的 font-size 动态响应父容器高度（例如 10% 高度），无需 JavaScript 或固定 font-size 父级。
本文介绍如何利用 css 容器查询长度单位 `cqh`，纯 css 实现子元素（如 ``）的 `font-size` 动态响应父容器高度（例如 10% 高度），无需 javascript 或固定 `font-size` 父级。
在传统 CSS 中，em、rem、% 等相对单位均依赖于字体尺寸上下文（如父元素 font-size 或根元素 font-size），而 vh/vmin 则基于视口而非父容器——因此当目标是“让 <span></span> 字号始终等于其直接父 <div> 高度的 10%”时，这些单位均无法直接满足需求。<p>现代 CSS 提供了更精准的解决方案：<strong>容器查询（Container Queries）及其专属长度单位</strong>。其中 <code>cqh（container query height）表示“容器高度的 1%”，完美契合本场景——它不依赖任何字体继承链，而是直接读取被标记为查询容器（query container）的父元素的实际渲染高度。
✅ 实现步骤如下：
-
为父容器启用容器查询：通过
container-type: size声明该<div> 为尺寸可查询容器（注意：需确保其具有明确的尺寸，如 <code>height: 30vh）； -
在子元素中使用
cqh单位：例如font-size: 10cqh表示字号 = 父容器高度 × 10%； -
无需设置父元素
font-size：cqh完全独立于字体继承体系，彻底规避传统相对单位的限制。 - 浏览器兼容性：
container-type和cqh已被 Chrome 111+、Firefox 117+、Safari 16.4+ 原生支持（caniuse.com/container-query）；旧版浏览器需降级处理（如回退为vh或 JS 方案）； - 容器必须具有布局上下文：确保父
div未被display: contents或container-type: inline-size干扰；推荐显式设置height和width； -
cqh基于容器的块方向高度（block size），对writing-mode敏感，如需适配横向书写模式，可考虑cqb（block size）或cqi（inline size）。
以下是完整可运行示例：
div {
height: 30vh;
width: 100vh;
background-color: #f0f0f0;
container-type: size; /* 关键：启用容器查询 */
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>
⚠️ 注意事项：
总结：cqh 是目前唯一能在纯 CSS 中实现“字体大小严格绑定父容器物理高度”的标准方案。它标志着 CSS 响应式能力从视口（viewport）迈向容器（container）的重要演进，适用于卡片标题、自适应徽章、动态图表标签等高频场景。
