必须在 :root 上显式设置 font-size: var(--font-base)，否则 rem 无法响应 css 变量变化；动态修改需用 document.documentelement.style.setproperty('--font-base', '18px') 并带单位；clamp() 中须含 rem 才随根字体缩放；避免硬编码 px、错误使用 em 及媒体查询覆盖变量。
必须在 :root 上显式设置 font-size: var(--font-base)，否则所有 rem 都不会响应变量变化。
为什么改了 CSS 变量，字体却没变大？
常见错误是只声明变量，却不把它赋给根元素的 font-size。比如写了 --font-base: 18px，但没写 font-size: var(--font-base)，那整个页面的 rem 计算基准仍是浏览器默认的 16px。
-
:root { --font-base: 16px; }—— 这行只是“存了个值”，不触发任何样式计算 -
:root { --font-base: 16px; font-size: var(--font-base); }—— 这行才真正让根字体大小绑定变量，1rem才等于16px - 漏掉后者，JS 调用
document.documentElement.style.setProperty('--font-base', '20px')后，页面字体依然不动
document.documentElement.style.setProperty 的正确写法
动态修改必须作用于根元素的 style，并带单位；否则变量值解析失败，静默回退到初始值或浏览器默认值。
- ✅ 正确：
document.documentElement.style.setProperty('--font-base', '18px')（px不能省） - ❌ 错误：
document.documentElement.style.setProperty('--font-base', 18)（无单位，var(--font-base)解析为无效值） - ❌ 错误：
document.body.style.fontSize = '18px'（只改 body，不影响rem基准） - 监听滑块时用
input事件，不是change，否则拖动过程无实时反馈
clamp() 在动态缩放中为何失效？
clamp() 本身不监听变量变化，它只做一次静态计算。能否随根字体缩放，取决于内部是否含 rem 单位。
- ✅ 有效：
font-size: clamp(0.875rem, 4vw, 1.25rem)（含rem，整体随--font-base变） - ❌ 无效：
font-size: clamp(14px, 2vw, 18px)（全为绝对/视口单位，和变量无关） - ⚠️ 危险：
font-size: clamp(14px, 1rem, 18px)（当1rem = 20px时，中间项 > 上下限，实际取18px，失去缩放意图） - 移动端小屏下
vw极小，clamp()容易锁死在最小值，建议用rem+ 媒体查询兜底
哪些地方最容易被 px 和 em 暗算？
全局缩放后，部分文字不变大，大概率是这些位置硬编码了绝对单位，或用了错误相对单位。
-
font-size: 14px→ 必须改为font-size: 0.875rem或font-size: var(--font-base) -
font-size: 1.2em→em相对父元素，不是根元素；换成1.2rem - 第三方组件（如 Element Plus 表格、Bootstrap Icons）若内部写死
font-size: 16px，需用!important覆盖，或检查其是否支持font-size属性透传 -
line-height必须用无单位值（如1.5），否则会放大倍数叠加；letter-spacing推荐用em，保持字间距比例一致
最常被忽略的一点：媒体查询里写 @media (max-width: 768px) { :root { font-size: 14px; } }，会直接覆盖 JS 设置的变量值，导致用户调整失效。应该把响应逻辑收口到 JS，用 resize 事件按需重设变量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
