直接在:root写font-size:16px不够用，因其为静态基准，无法响应视口变化、用户缩放或dpr切换；必须用css变量（如--font-base:16px）配合font-size:calc(var(--font-base)*1)实现动态绑定，并通过js修改变量值驱动全局响应。
为什么直接在 :root 里写 font-size: 16px 不够用
因为这样只是设了个静态基准，rem 单位确实会算，但屏幕一变、用户缩放、DPR 切换，它就完全不响应。真正要“动态”，得让 :root 的 font-size 跟着视口宽度或系统设置实时变化——而纯 CSS 无法读取 window.innerWidth 或 matchMedia 结果，必须靠 JS 驱动。
如何用 :root + CSS 变量替代硬写 font-size
别直接改 html 或 :root 的 font-size 属性，而是声明一个变量，再用 calc() 绑定它：
/* 推荐写法：把基准抽成变量 */
:root {
--font-base: 16px;
font-size: calc(var(--font-base) * 1);
}
<p>/<em> 后续所有 rem 值都基于这个变量间接生效 </em>/
h1 { font-size: 2rem; } /<em> 实际 = 2 × var(--font-base) </em>/</p>
-
--font-base必须带单位（如16px），CSS 变量不自动补 -
font-size: calc(var(--font-base) * 1)是为了触发重计算，避免某些浏览器缓存旧值 - JS 修改时用
document.documentElement.style.setProperty('--font-base', '18px')，不是font-size
JS 修改 :root 变量后，clamp() 为什么没反应
clamp() 本身不监听变量变化，它只在声明时求一次值。如果你写 font-size: clamp(14px, 2vw, 18px)，里面全是绝对/视口单位，和 --font-base 完全无关。
- 要让它响应，至少一项得是
rem，例如clamp(0.875rem, 4vw, 1.25rem) - 混用单位很危险：
clamp(14px, 1rem, 18px)在1rem = 20px时会取18px，实际比中间项还小 - 移动端小屏下
4vw可能小于0.875rem，导致锁死在最小值，建议加媒体查询兜底
line-height 和 letter-spacing 怎么同步缩放
只改 font-size，其他属性不动，视觉比例就会崩：小字号时行距挤成一团，大字号时字间距拉太开。
-
line-height一定要用无单位数值（如1.4），它会随当前字体大小等比缩放 -
letter-spacing推荐用em（不是rem），因为它是相对于当前元素字号的微调，更精准 - 图标字体（如 iconfont）需确保其
font-size也用rem，否则和文字错位
最易被忽略的是第三方 UI 库——它们内部常用 em 写 padding 或 border-radius，这些不会随 --font-base 变，得手动覆盖或查文档看是否支持透传根字号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
