直接用 px 除以根字体大小算 rem 不可靠，因 SCSS 编译时无法获知运行时动态设置的根字号；安全做法是统一设计稿基准（如 750px 宽、100px 根字号），SCSS 函数按此比例换算，JS 动态设置根字号严格对齐该基准。
为什么直接用 px 除以根字体大小算 rem 不可靠
因为移动端根元素（html）的 font-size 通常是动态设置的（比如通过 JS 根据屏幕宽度缩放），而 SCSS 编译发生在构建时，无法感知运行时的根字号。所以不能写 16px / 16 这种“假设根为 16px”的硬编码换算——它在 iPhone 上可能实际是 50px，结果就错得离谱。
真正能用的方案，是把设计稿基准（比如 750px 宽、16px 基准字号）作为统一参考系，所有尺寸按比例缩放到该基准下计算 rem 值，再让 JS 动态调整根字号去匹配这个缩放逻辑。
常见错误现象：rem(32) 在开发环境显示正常，上线后某些机型文字小得看不见——根源就是函数没对齐设计稿基准，或 JS 设置的根字号和 SCSS 计算假设不一致。
如何定义安全的 rem() 自定义函数
函数必须只依赖设计稿约定，不读取任何运行时值。典型做法：假设设计稿基于 750px 屏宽、基准根字号为 100px（即 1rem = 100px），那么 1px = 0.01rem；若你习惯 16px 基准，则 1px = 1/16rem ≈ 0.0625rem。选哪个不重要，关键是全项目统一。
立即学习“前端免费学习笔记（深入）”；
- 推荐用 100px 基准：数字整除友好，避免浮点误差，例如
rem(32)→0.32rem - 函数内部不做单位转换，只返回纯数字 +
rem单位，例如@return ($px / 100) * 1rem - 务必加类型检查，防止传入带单位的值导致编译报错：
@if unit($px) == "px" - 支持传入 Sass 数字列表（如
rem(16 24 8)），方便一键转换padding、margin等多值属性
示例：
@function rem($px) {
@if type-of($px) == "number" and unit($px) == "px" {
@return ($px / 100) * 1rem;
}
@else if type-of($px) == "list" {
$rem-list: ();
@each $item in $px {
$rem-list: append($rem-list, rem($item));
}
@return $rem-list;
}
@else {
@warn "rem() expected px unit, got #{unit($px)}";
@return $px;
}
}JS 动态根字号必须和 SCSS 函数假设严格对齐
这是最容易被忽略的一环：SCSS 的 rem() 是按 “1rem = 100px” 算的，那 JS 就必须让 document.documentElement.style.fontSize 最终等于 (window.innerWidth / 750) * 100 + "px" —— 也就是把 750px 设计稿等比缩放到当前屏幕宽度，并把缩放后的 100px 赋给根字体大小。
如果 JS 写成 16 * (width / 375)（常见于 375px 基准），而 SCSS 仍按 100px 基准算，两者就完全错位，所有尺寸都会偏差 6.25 倍。
- 检查 JS 中设置根字号的公式分母是否等于设计稿宽度（如 750）
- 检查分子是否等于你 SCSS 函数里除的那个数（如 100）
- 可在控制台执行
getComputedStyle(document.documentElement).fontSize，对照当前屏幕宽度验证是否符合预期比例
别在媒体查询里混用 rem() 和固定 px
当用 @media (max-width: 750px) 做断点时，里面的 rem() 依然按设计稿基准算，但此时 JS 可能已将根字号调大（比如横屏时），导致断点内样式“看起来变大了”。这不是函数问题，而是响应逻辑耦合太紧。
更稳妥的做法是：断点本身也用设计稿逻辑，比如 @media (max-width: 750px) 对应设计稿原始宽度，所有 rem() 值保持不变；视觉差异由 JS 动态根字号统一调控，而不是靠媒体查询“二次干预”。
如果你真需要针对不同设备做差异化缩放（比如平板停在 120px 根字号），那就得在 JS 里做多档判断，同时确保 SCSS 函数的基准值（100）和 JS 每一档的映射关系可逆、可验证。
复杂点在于：一旦加入 viewport 缩放、iOS Safari 的字体放大、用户系统字号偏好等干扰项，rem 表现就会漂移。这时候与其死磕 rem，不如考虑 vw + clamp() 组合，或者直接上 CSS 自定义属性 + JS 更新策略。
