如何用单个CSS类实现可变的动态字体大小？

你可以通过CSS自定义属性（变量）来实现这个需求，既保留不同元素的初始字号，又用单一类统一控制缩放速率，彻底精简CSS代码：

1. 定义通用缩放类
   在CSS中创建一个通用类，通过自定义属性接收元素的初始字号，再结合固定的vw速率计算最终字体大小：

.dynamic-text {
  /* 设置默认初始字号，未指定的元素会使用这个值 */
  --base-size: 16px;
  font-size: calc(var(--base-size) + 1.2vw);
}

2. 在HTML中为元素指定初始字号
   给需要动态缩放的元素添加通用类，同时通过内联样式设置专属的--base-size变量：

<h1 class="dynamic-text" style="--base-size: 28px;">页面主标题</h1>
<h2 class="dynamic-text" style="--base-size: 22px;">二级标题</h2>
<p class="dynamic-text" style="--base-size: 16px;">正文段落</p>
<small class="dynamic-text" style="--base-size: 14px;">辅助说明文字</small>

这种方式的优势：

• 仅需一个CSS类，避免重复代码，大幅减少CSS体积
• 每个元素可独立设置初始字号，缩放速率完全统一
• 自定义属性兼容性好，现代浏览器均支持

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