rem不生效是因为未动态调整html的font-size；需通过JS（如按屏幕宽度比例设置）或媒体查询手动更新根字号，否则rem仅静态参照初始值。
为什么直接用rem不生效
很多人写了 html { font-size: 16px; }，再给元素设 font-size: 1.5rem;，发现缩放或换设备后字号纹丝不动——根本原因是没动态改 html 的 font-size。rem 只是“相对于根元素字号的单位”，它本身不带响应逻辑，必须配合 JS 或媒体查询手动更新基准值。
用JS动态设置html font-size最常用方案
主流做法是在页面加载和窗口缩放时，按屏幕宽度比例重设 html 的 font-size。常见公式是：document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 * 16 + 'px';（以 iPhone 6/7/8 的 375px 屏宽为基准，16px 为设计稿基准字号）。
实操建议：
- 把这段逻辑封装成函数，例如叫
setRootFontSize，并在DOMContentLoaded和resize事件中调用 - 加节流（如 100ms 内只执行一次），避免频繁触发影响性能
- 注意：
clientWidth不包含滚动条宽度，PC 端若出现横向滚动条，可能造成偏差；可改用innerWidth，但需自行处理缩放导致的非整数问题 - 部分安卓 WebView 对
resize支持弱，可额外监听orientationchange
媒体查询 fallback 方案更轻量但粒度粗
如果项目不需要精细连续适配，纯 CSS 方案更稳妥。用几个关键断点覆盖主流设备：
立即学习“前端免费学习笔记（深入）”；
html { font-size: 16px; }
@media screen and (min-width: 320px) { html { font-size: 14.2px; } }
@media screen and (min-width: 375px) { html { font-size: 16px; } }
@media screen and (min-width: 414px) { html { font-size: 17.5px; } }
@media screen and (min-width: 768px) { html { font-size: 20px; } }这样写的好处是零 JS 依赖、无兼容风险；缺点是字号跳跃明显，且无法响应缩放或自定义字体大小设置（用户在系统里调大字体，CSS 媒体查询不会感知）。
设计稿基准与实际开发对不上怎么办
设计师给的是 750px 宽稿，你按 375px 基准算出来的 rem 值会翻倍——这是最常踩的坑。关键要统一换算基准：
- 若设计稿宽 750px，推荐将基准屏宽设为 750，即
fontSize = clientWidth / 750 * 16，这样 1rem = 16px 在 750px 屏上，方便对照标注 - 或者保持 375 基准，但要求设计师标注时除以 2（比如标“32px”实际写
2rem），团队需明确约定 - 使用 PostCSS 插件（如
postcss-pxtorem）可自动转 px 为 rem，但务必配置好rootValue与设计稿基准一致，否则所有转换全错
真正难的不是算公式，而是让设计、前端、测试三方对“1rem 到底等于多少物理像素”有同一时刻的共识。一旦基准偏移 1px，整站字号就集体漂移。
