如何通过SCSS函数自动计算CSS移动端rem单位_通过自定义@function转换-css教程-PHP中文网

直接用 px 除以根字体大小算 rem 不可靠，因 scss 编译时无法获知运行时动态设置的根字号；安全做法是统一设计稿基准（如 750px 宽、100px 根字号），scss 函数按此比例换算，js 动态设置根字号严格对齐该基准。

如何通过scss函数自动计算css移动端rem单位_通过自定义@function转换

为什么直接用 `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 赋给根字体大小。