scss 无法自动将 px 转为 rem，需显式调用 px2rem() 函数并配合 js 动态设置 html font-size；基准值（如 100）由设计稿宽度（750px）与 js 计算逻辑绑定，非浏览器默认 16；函数须剥离单位再运算，且需确保编译、运行时、设计稿三者基准严格一致。
SCSS 本身不能“自动”转换 px 为 rem——它只在编译期做静态计算，必须显式调用函数；所谓“自动”，其实是靠你统一用 px2rem() 替代手算，再配合 JS 运行时动态设置 html 的 font-size 才能生效。
为什么 px2rem($px) 必须除以 100（而不是 16）？
这不是浏览器默认值，而是和 JS 动态逻辑强绑定的基准：设计稿宽 750px → JS 设置 document.documentElement.style.fontSize = window.screen.width * window.devicePixelRatio / 750 * 100 + 'px' → 此时 1rem = 100px（设计稿单位）。所以 px2rem(32) 输出 0.32rem，才真等于设计稿上的 32px。用 16 就彻底错位。
- 硬编码
$base: 16是最大陷阱，99% 的项目都不适用 - 基准必须提成变量：
$rem-base: 100;，函数里引用它，避免散落魔法数字 - 若设计稿是 375px 宽，基准应为
37.5，调用时写px2rem(32, $base: 37.5)，语义更清晰
如何写一个防错、健壮的 px2rem 函数？
直接写 $px / $rem-base * 1rem 会崩——SCSS 不允许纯数字（如 32）和带单位值（1rem）混算。必须先剥离单位，再统一运算。
- 开头加单位判断：
@if unitless($px) { $px: $px * 1px; } - 用
$px / 1px安全去单位，再除基准：($px / 1px) / $rem-base * 1rem - 别漏掉
@return后的单位，否则输出的是无单位数值，CSS 解析失败 - 完整示例：
@function px2rem($px, $base: $rem-base) { @if unitless($px) { $px: $px * 1px; } @return ($px / 1px) / $base * 1rem; }
用了 px2rem 却没缩放？先查这三处
函数只管“写出来是多少 rem”，不负责“这个 rem 到底多大”。渲染失效几乎全是运行时问题。
-
里没插 JS 脚本，或脚本加载晚于 CSS，导致首屏按浏览器默认 16px 渲染 - 写了
html { font-size: 50px; }这类硬编码样式，直接覆盖 JS 设置 - 用了 Vant/NutUI 等 UI 库，其内部样式用 px 或自己的 rem 基准（如 37.5），和你的
$rem-base冲突，得手动覆盖
媒体查询断点、border、伪元素这些地方最容易漏
px2rem() 不会自动扫描代码，所有带 px 的地方都得人工过一遍：
- 断点别写
@media (max-width: 750px)，改用@media (max-width: 7.5rem)（前提是根字号已对齐） -
border: 1px solid #000在高清屏下太粗，得结合transform: scaleY(0.5)或用border-image - ::before/::after 的
width、height、font-size同样要套px2rem() - 第三方库的 class（如
.van-button）若尺寸异常，优先查它的源码是否用了 px
真正麻烦的从来不是写函数，而是让 SCSS 编译结果、JS 运行时设置、设计稿基准这三者严丝合缝对齐——少一个环节，整个 rem 适配就塌一半。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
