SCSS不能自动转换px为rem，必须显式调用px2rem函数，且其基准值（如100）须与JS动态设置的html font-size严格对齐；除以100而非16是因为它绑定750px设计稿与JS逻辑（1rem=100px），而非浏览器默认16px。
SCSS 本身不能“自动”转换 px 为 rem——你必须显式调用函数，且该函数的基准值必须和运行时 JS 设置的 html font-size 完全对齐，否则输出的 rem 值在页面上根本不会按预期缩放。
为什么 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 解析失败
完整示例：
立即学习“前端免费学习笔记（深入）”；
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
@function px2rem($px, $base: $rem-base) {
@if unitless($px) {
$px: $px * 1px;
}
@return ($px / 1px) / $base * 1rem;
}用了 px2rem 却没缩放？先查这三处
函数只管“写出来是多少 rem”，不负责“这个 rem 到底多大”。渲染失效几乎全是运行时问题。
-
<head>里没插 JS 脚本，或脚本加载晚于 CSS，导致首屏按浏览器默认 16px 渲染 - 写了
html { font-size: 50px; }这类硬编码样式，直接覆盖 JS 设置 - 用了 Vant/NutUI 等 UI 库，其内部样式用
px或自己的rem基准（如 37.5），和你的$rem-base冲突，得手动覆盖
媒体查询断点、border、伪元素这些地方最容易漏——px2rem() 不会自动扫描代码，所有带 px 的地方都得人工过一遍。
哪些地方容易漏掉 px2rem() 调用
很多人只转 font-size 和 padding，但以下几类必须同步处理，否则响应式错乱：
-
border-width：比如border: 1px solid #000，在高清屏下太细，得写成border-width: px2rem(1) -
line-height：如果写了line-height: 24px（而非无单位值），就必须转 - 伪元素尺寸：
::before { width: 20px; height: 20px; }这类固定像素图形，在rem方案里也要同步换算
最常被忽略的其实是 JS 动态设置根字号的时机——只监听 resize 不够，DOMContentLoaded 必须触发一次，否则首屏永远按默认 16px 渲染。
