CSS变量与rem混用会放大字号偏差，根本原因是变量仅作字符串替换，不感知rem动态计算时机；若JS未及时设置html font-size，--text-size: 1.2rem会按默认16px算出19.2px且不再重算，导致首屏错位与后续失配。
为什么CSS变量和rem混用会放大字号偏差
CSS变量本身不感知rem计算时机，它只是字符串替换；当你写--text-size: 1.2rem，再在font-size: var(--text-size)里用，浏览器会按当前html的font-size算一次——但如果这个值还没被JS动态设稳（比如首屏渲染时仍为默认16px），变量里的1.2rem就先按16px算成了19.2px，后续JS修正根字号后，它不会自动重算。
- 变量声明在CSS文件顶部，但JS设置
document.documentElement.style.fontSize常滞后于样式解析 - 媒体查询中引用
var(--text-size)时，断点判断发生在根字号最终确定前，导致错位 - PostCSS插件（如
postcss-pxtorem）若配置了rootValue，但运行时根字号已被系统缩放覆盖，变量编译值与实际值对不上
怎么让CSS变量真正“响应”rem基准
核心是切断变量对绝对rem值的依赖，改用相对系数或函数式表达。不要把rem塞进变量值里，而是把比例因子提出来。
- 错误写法：
:root { --text-base: 1.25rem; font-size: 100px; }→1.25rem在JS未执行前就是20px，错失动态性 - 正确写法：
:root { --text-ratio: 1.25; font-size: clamp(14px, 2.5vw, 18px); }，再用font-size: calc(var(--text-ratio) * 1rem) - 更稳妥：直接用
font-size: clamp(1.25rem, 4vw, 1.5rem)，不经过变量中转——clamp()内部的rem会在每次重排时重新计算 - 若必须变量控制多档字号，定义
--text-xs: 0.875; --text-sm: 1; --text-lg: 1.25，然后统一用font-size: calc(var(--text-lg) * 1rem)
JS动态校准阶段如何同步CSS变量
单纯改document.documentElement.style.fontSize不影响已声明的CSS变量；你得手动触发变量更新，否则旧值残留。
- 在JS设置完根字号后，立刻同步变量：
document.documentElement.style.setProperty('--text-ratio', '1.25') - 避免在
DOMContentLoaded里只设一次——iOS Safari可能延迟触发resize，需在setrem()函数末尾加变量同步逻辑 - 检查是否被第三方库覆盖：某些UI框架（如Ant Design Mobile）会在初始化时重写
:root变量，你的同步代码要放在它们之后执行 - 调试时用
getComputedStyle(document.documentElement).getPropertyValue('--text-ratio')确认值已生效，别只看CSS文件里的声明
哪些CSS变量场景必须放弃rem
不是所有地方都适合用rem参与变量计算。有些属性叠加缩放后视觉失控，比不用还糟。
立即学习“前端免费学习笔记（深入）”；
-
line-height：禁止--line-height: 1.5rem，应写--line-height: 1.5（无单位），它天然随字号缩放 -
border-width：--border: 0.01rem在小屏下可能缩到0.2px不可见，改用--border: 1px或--border: 0.5px -
box-shadow偏移量：如--shadow-x: 0.2rem，横屏切换时阴影会突然拉长，建议固定px或用vw -
transform: scale()：变量里存--scale: 1.2即可，别写--scale: 1.2rem——scale()本身已是无量纲操作
最易被忽略的是：CSS变量一旦在伪元素（::before）、@keyframes或@media里引用，其计算时机完全脱离JS控制。这些地方要么全用px/vw兜底，要么确保根字号在CSS加载早期就由<style>内联设好，不能只靠JS异步注入。
