SCSS仅在编译期静态转换px为rem，动态缩放必须由JS实时设置html的font-size实现；函数须参数化基准值（如$base: 100），禁止硬编码，并与JS逻辑严格对齐设计稿宽度（如750px）和根字号策略。
SCSS 本身不处理动态缩放，它只在编译期把 px 换算成 rem；真正的“动态”靠 JS 或 CSS 运行时控制 html 的 font-size。写错函数或漏掉运行时逻辑，样式就只是静态 rem，根本不会随屏幕变化。
SCSS 中必须用参数化 px2rem 函数，不能硬编码基准值
很多人直接写 @function px2rem($px) { @return $px / 37.5 * 1rem; }，结果换设计稿或改基准就得全局搜替换。这等于把魔法数字埋进函数里。
- 基准值（如 100、75、37.5）必须可配置，统一定义为变量：
$rem-base: 100; - 函数显式接收基准参数：
@function px2rem($px, $base: $rem-base) { @return ($px / $base) * 1rem; } - 调用时按需覆盖：
width: px2rem(750, 75);表示按 750px 设计稿、1rem = 75px 计算 → 输出 10rem - 别在函数里写媒体查询或 JS 注入——那是运行时的事，SCSS 不知道设备宽度是多少
JS 动态设置 html font-size 是 rem 缩放的唯一生效前提
SCSS 编译完的 font-size: 0.32rem; 要想在 iPhone 和安卓机上显示不同物理大小，必须让 1rem 在不同设备上代表不同像素值。这只能靠 JS（或 vw）实时改 html 的 font-size。
- 推荐计算式：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 + 'px';（对应 750px 设计稿 + 1rem = 100px） - 必须在
DOMContentLoaded后立即执行一次，否则首屏不生效 - 监听
resize和orientationchange，横竖屏切换才不崩 - 避开
font-size: 10vw：部分安卓 WebView 对 vw 解析不稳定，小屏下字体可能忽大忽小
哪些 CSS 属性该用 rem，哪些坚决不能碰
rem 是尺寸缩放单位，不是万能单位。混用会破坏视觉一致性，尤其在小屏下放大/缩小失衡。
立即学习“前端免费学习笔记（深入）”；
- 该用：
font-size、margin、padding、width、height、border-radius - 禁用：
line-height（用无单位数值，如1.5，避免叠加缩放）、border（固定1px，否则小屏下 border 可能缩到看不见）、box-shadow偏移、transform: scale()参数 - 背景图尺寸、图标字体（
font-family: iconfont）也建议用 px 或 SVG，rem 会导致图标模糊或比例异常
最常被忽略的一点：viewport 设置和根字号策略必须严格对齐。比如设计稿是 750px，JS 就得按 clientWidth / 750 * 100 算，而 SCSS 函数里的 $base 也得是 100——三者差一个数，整个页面就偏了。这不是“差不多就行”的事，是像素级对齐问题。
