postcss-pxtorem不是开箱即用的魔法，仅按rootvalue机械换算px→rem；响应效果取决于rootvalue与运行时html font-size是否严格一致，二者不匹配则尺寸失真。
直接说结论：postcss-pxtorem 不是“开箱即用”的魔法，它只做一件事——按你给的规则把 px 换成 rem；真正决定响应效果的，是 rootValue 和运行时动态设置的 html 字体大小是否匹配。
配置 rootValue 时别只写死数字
很多人一上来就设 rootValue: 37.5，以为适配移动端就万事大吉。但这个值必须和你在 JS 中动态设置的 document.documentElement.style.fontSize 基准一致，否则转换结果会错位。
- 如果设计稿是 375px 宽，且你用 JS 把
html的font-size设为37.5px（对应 1rem = 37.5px），那rootValue就得是37.5 - 如果项目同时要支持 PC 端，又不想让 PC 上的 rem 过大，可以改用函数形式动态返回：
rootValue: (input) => input.file.includes('pc') ? 16 : 37.5 - 注意：这个值参与除法运算（
20px → 20 / rootValue rem），所以小数精度会影响输出，别用37.5000001这类浮点误差值
propList 控制哪些属性被转，不是“越全越好”
默认只转字体相关属性，是因为像 border、outline、box-shadow 这些值通常不希望随根字号缩放。盲目设 ['*'] 可能导致边框在小屏上细得看不见，或阴影糊成一片。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 推荐显式列出需要转的：
['font-size', 'width', 'height', 'padding', 'margin', 'line-height'] - 排除特定属性用否定符：
['*', '!border', '!box-shadow'] - UI 框架（如 Vant、Element Plus）的样式若也被转换，容易破坏组件视觉，建议配合
exclude或selectorBlackList过滤
exclude 和 selectorBlackList 是防止误伤的关键
插件默认会处理所有 CSS 文件，包括 node_modules 里的第三方样式。不加限制的话，Vant 的 .van-button 会被强行转 rem，按钮尺寸可能严重失真。
- 用
exclude排文件：exclude: /node_modules|lib\/ui\//i - 用
selectorBlackList排选择器：selectorBlackList: ['.van-', '.el-', 'html', 'body']（注意：它匹配的是选择器字符串，不是类名前缀） - 这两个选项不互斥，建议一起用：既避免引入第三方样式被转，也防止自己写的某些特殊模块（如弹窗蒙层）被缩放
转换后没生效？先查构建流程是否真走到了 postcss
常见假性失效：写了配置，但 postcss.config.js 放错位置，或构建工具（Vue CLI、Vite、Webpack）根本没加载 PostCSS 插件。
- Vite 项目需确认
vite.config.ts中是否启用了css.postcss配置，而不是只靠根目录的postcss.config.js - Vue CLI 项目中，
vue.config.js的css.loaderOptions.postcss.plugins必须是数组，且require('postcss-pxtorem')要放在里面 - 最简单的验证方式：在任意 CSS 文件里写一个明显不会被其他插件处理的
px值（比如top: 999px），看输出文件里是否变成top: 62.4375rem类似内容
真正难的从来不是怎么配插件，而是让 rootValue、JS 动态设置的 font-size、设计稿基准、设备 DPR 四者对齐。漏掉任意一环，rem 就只是个漂亮的错误。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
