必须同时配 amfe-flexible（运行时动态设根字号）和 postcss-pxtorem（构建时转换单位），缺一不可；前者在main.js顶部引入以确保首屏渲染前生效，后者rootvalue需与设计稿基准及vant适配对齐（推荐37.5），且仅转换构建时css源码，不处理行内样式和未过postcss的第三方样式。
直接结论：必须同时配 amfe-flexible（运行时动态设根字号）和 postcss-pxtorem（构建时转换单位），缺一不可。只装一个，页面要么不缩放，要么单位没变。
为什么 amfe-flexible 必须在 main.js 里引入？
它不是构建时工具，而是运行时脚本，负责监听设备宽度、DPR，并实时修改 document.documentElement.style.fontSize。不引入，html 的 font-size 就是浏览器默认的 16px，后续所有 rem 计算都失效。
- 必须放在
main.js最顶部（早于 Vue 实例创建），否则首屏渲染时根字号可能来不及生效 - 它内部已处理了
window.onresize和DOMContentLoaded，无需手动写监听逻辑 - 注意：Vant 官方明确要求使用
amfe-flexible或其 fork 版本（如flexible.js），不要用自己手写的rem.js，兼容性差且易漏掉 orientationchange 等事件
postcss-pxtorem 的 rootValue 怎么设才不翻车？
这个值不是随便填的数字，它必须和设计稿基准宽度、以及 amfe-flexible 实际设置的根字号对齐。常见错误是“设计稿 750，就填 75”，结果 Vant 组件被放大一倍——因为 Vant 源码样式基于 375 设计稿，它的 px 值是按 37.5 为基准写的。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章