scss函数仅在编译期静态转换px为rem，动态缩放必须由js实时设置html的font-size实现；函数须参数化基准值（如$base: 100），禁止硬编码，并与js逻辑严格对齐设计稿宽度（如750px）和根字号策略。
SCSS函数本身不能“计算响应式基准值”，它只能把设计稿上的px数值，按你指定的基准换算成rem；真正的响应式缩放必须由运行时控制html的font-size实现，否则px2rem(750)输出的永远是静态的7.5rem，不会随屏幕变。
为什么px2rem()函数必须带$base参数
硬编码基准（比如直接写@return $px / 37.5 * 1rem）会导致项目一换设计稿宽度或适配策略就得全局搜索替换。这等于把魔法数字埋进函数里，维护成本极高。
- 统一定义变量：
$rem-base: 100;（对应750px设计稿下1rem = 100px） - 函数签名必须显式支持覆盖：
@function px2rem($px, $base: $rem-base) - 调用时可灵活切换：
width: px2rem(750, 75);→ 输出10rem，表示按1rem = 75px换算 - 不传
$base时走默认值，保持一致性；传了就只影响这一处，不污染全局
px2rem()函数里为什么要先处理单位
SCSS不允许14 / 100 * 1rem这种运算：左边是纯数字，右边是带单位值，类型不匹配，编译直接报错。
- 正确做法是先用
$px / 1px安全去单位，再参与除法：($px / 1px) / $base * 1rem - 开头加防护判断：
@if unitless($px) { $px: $px * 1px; }，兼容传入14和14px两种写法 - 千万别写
$px / $base * 1rem——如果$px是14px，结果就是14px / 100 * 1rem，单位残留导致后续乘法崩掉
媒体查询断点也要用rem，但别指望SCSS自动转
SCSS不会帮你把@media (max-width: 750px)自动变成@media (max-width: 7.5rem)，这事得手动改，而且前提是html的font-size已按比例设好。
- 断点换算逻辑必须和
px2rem()一致：@media (max-width: px2rem(750)) - border、line-height、伪元素尺寸这些地方最容易漏，函数不会自动扫，得人工过一遍
- 别在函数里写
@if $dpr > 2 { ... }——$dpr不是SCSS变量，是JS从window.devicePixelRatio读的，编译期根本不可见
最常被忽略的一点：SCSS函数只管“写出来是多少rem”，不管“这个rem到底多大”。哪怕函数写得再完美，只要JS没动态设置html { font-size: ... }，或者CSS变量--base-font-size没生效，整个rem体系就只是静态纸面功夫。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
