vue 3项目中使用postcss-pxtorem实现px转rem必须同时配置构建时转换规则和运行时根字体动态计算，缺一不可；仅配其一将导致页面错乱。
直接说结论：Vue 3项目里用 postcss-pxtorem 自动转 px → rem，必须同时配两件事——构建时转换规则 + 运行时根字体动态计算。只做一半，页面照样错乱。
vue.config.js 中配置 postcss-pxtorem 插件
Vue CLI 项目（包括 Vue 3）推荐在 vue.config.js 里声明 PostCSS 插件，避免和 package.json 的 postcss 字段冲突（二者选其一，同时存在会失效）。
-
rootValue是核心：它不是“设计稿宽度 ÷ 100”，而是“1rem 对应多少 px”。常见值有37.5（对应 750px 设计稿）、75（对应 1440px 或双倍图）、16（纯开发习惯，非适配场景）。别硬套公式，先确认你团队约定的基准 -
propList建议写['*']，但若用了第三方 UI 库（如 Vant、Naive UI），要把它们的 class 名加进selectorBlackList，否则按钮边框、图标尺寸会被误转 -
mediaQuery: true要谨慎开启：媒体查询里的px（比如@media (max-width: 768px)）转成rem后逻辑会变，多数情况保持false - 示例片段：
const pxtorem = require('postcss-pxtorem')
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
pxtorem({
rootValue: 37.5,
propList: ['*'],
selectorBlackList: ['.van-', '.n-button'],
mediaQuery: false,
minPixelValue: 2
})
]
}
}
}
}
运行时必须动态设置 html 的 font-size
postcss-pxtorem 只负责编译期替换，它不改 DOM、不设根字号。如果 html 的 font-size 固定是 16px，那所有 rem 都按 16px 算——在 iPhone 上就撑满，在 Pad 上就缩成一团。
- 不要手写
html { font-size: 10vw }：这在横屏/缩放/某些 Android 浏览器下失效，且不兼容 dpr - 用
amfe-flexible（已维护）或其轻量替代lib-flexible：它会在页面加载时读取设备 dpr 和宽度，算出合理font-size并注入style标签 - 必须在
main.js最顶部引入：import 'amfe-flexible'，不能放在createApp之后，否则首屏渲染时根字号还没生效 - 注意：Vite 项目不能直接 import
amfe-flexible（它依赖 document 全局对象），得用vite-plugin-lib-flexible或手动封装初始化逻辑
常见错误现象与排查点
写了配置但样式还是不对？大概率卡在这几个地方：
-
postcss-pxtorem没生效：检查是否装的是postcss-pxtorem（带连字符），不是postcss-px2rem或拼错的postcss-pxtorem（空格、大小写） - 部分元素没转：查看该元素 CSS 是否被
selectorBlackList匹配了，或者它的属性名不在propList列表里（比如写了propList: ['width', 'height']，漏了padding） - 字体模糊/图标错位：
rootValue和运行时font-size不匹配。例如配置了rootValue: 37.5，但amfe-flexible实际设的font-size是 18.75px（即 0.5rem），那所有尺寸都会 ×2 - Vant 组件样式异常：Vant 默认用 px，若你全局启用了
postcss-pxtorem，务必把.van-加入selectorBlackList，否则按钮内边距、图标大小全乱
真正麻烦的从来不是配置几行代码，而是让构建时的转换逻辑和运行时的根字号计算严丝合缝。哪怕 rootValue 差 0.1，dpr 判定错一次，整个页面的视觉比例就偏了——这种偏差在真机上才明显，本地开发看不出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
