结论：SCSS中@function转rem必须与JS动态设置的html font-size基准严格对齐，否则自适应失效；需在DOMContentLoaded和resize时重设font-size，用clientWidth而非innerWidth，加防抖，并通过prependData全局注入函数，同时考虑DPR和最小font-size兜底。
直接说结论：在 SCSS 中用 @function 将设计稿像素值转为 rem，必须配合 JS 动态设置 html 的 font-size，否则“自适应”只是假象——rem 本身不自适应，它只忠实反映根字体大小。
SCSS 中定义 rem 转换函数：注意分母必须和 JS 设置的基准一致
常见错误是 SCSS 里用 37.5，JS 却按 750 / 10 算出 75px，结果所有尺寸翻倍。两者必须对齐。
- 若设计稿宽是
750px，JS 设置html.style.fontSize = clientWidth / 7.5 + 'px'（即 1rem = 100px），则 SCSS 函数应为：@function rem($px) { @return $px / 100 * 1rem; } - 若设计稿宽是
640px，JS 设置html.style.fontSize = clientWidth / 6.4 + 'px'（即 1rem = 100px），SCSS 同样用/ 100，保持单位换算逻辑统一 - 别写成
$px / 37.5 + rem—— 这隐含假设 1rem = 37.5px，但实际 JS 已把根字号设为可变值，硬编码会失效
JS 动态设置 html font-size：resize 和 DOMContentLoaded 都要触发
只监听 resize 不够：页面首次加载时若未触发 resize（比如从桌面浏览器打开），font-size 仍为默认值，样式错乱。
- 必须在
DOMContentLoaded和resize（或orientationchange）两个时机都调用重设函数 - 避免用
window.innerWidth，改用document.documentElement.clientWidth，它排除滚动条宽度，更接近真实视口 - 加防抖：高频 resize 可能导致重排卡顿，简单节流（如 100ms 内只执行一次）比完全不处理更稳妥
Vue/React 项目中全局注入 SCSS 函数：别漏掉 prependData 配置
在 vue.config.js 或 vite.config.ts 中漏配 prependData，会导致 .vue 文件里调用 rem(20) 报错 Undefined mixin or function "rem"。
- Vue CLI 项目：
css: { loaderOptions: { sass: { prependData: `@import "@/styles/functions.scss";` } } } - Vite 项目（v5+）：
css: { preprocessorOptions: { scss: { additionalData: `@import "@/styles/functions.scss";` } } } - 确保
functions.scss文件路径正确，且该文件只含@function定义，不含任何 CSS 规则或@import循环引用
容易被忽略的兼容性细节：font-size 最小限制与 DPR 影响
Android WebView 和部分低端机型强制限制 html 的 font-size 不得小于 12px，当屏幕过窄（如 320px）时，320 / 7.5 ≈ 42.7px 没问题，但若按 640px 设计稿用 / 6.4，320px 屏幕下会得到 50px，看似安全——但 DPR=3 的设备（如某些华为旗舰）实际渲染像素翻三倍，文字可能糊掉或布局溢出。
- 建议在 JS 计算后做兜底：
const size = Math.max(12, clientWidth / 7.5); htmlEl.style.fontSize = size + 'px';
- DPR 高的设备建议结合
viewport的initial-scale控制缩放，单纯靠 rem 无法解决 1px 边框过粗问题 - 测试真机时重点看 320px、375px、414px、768px 这几档宽度，别只信 Chrome DevTools 的模拟器
真正难的不是写函数或设 font-size，而是让设计稿像素、JS 计算逻辑、SCSS 转换系数、构建配置、真机 DPR 表现全部咬合在一个节奏上——少一环，rem 就退化成静态单位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
