如何用纯CSS将子元素字体大小设为父元素高度的10%？

可以实现，核心是利用CSS容器查询（Container Queries）特性，它允许子元素基于父容器的尺寸设置样式，完全不需要JavaScript。

为什么你之前尝试的单位无效 #

• vh/vmin：仅相对于视口高度，和父元素高度无关；
• em/rem：基于字体大小计算，不是元素的高度；
• %：在font-size属性中，百分比是相对于父元素的字体大小，而非父元素的高度。

解决方案代码 #

给父容器添加容器类型声明，然后在子元素中直接引用容器高度进行计算：

<div class="parent">
  <span>示例文本</span>
</div>

.parent {
  height: 20vh;
  width: 100vh;
  background-color: #f0f0f0;
  position: relative;
  /* 将父元素声明为尺寸容器，允许子元素查询其尺寸 */
  container-type: size;
}

.parent span {
  /* 字体大小 = 父容器高度 × 10% */
  font-size: calc(container(height) * 0.1);
}

兼容性说明 #

容器查询已被Chrome、Firefox、Safari等现代主流浏览器支持，无需添加前缀。如果需要兼容极旧浏览器，可针对当前固定父元素高度场景直接写font-size: 2vh，但容器查询是能动态适配父元素高度变化的最优方案。

内容的提问来源于stack exchange，提问作者Alo