uni-app中postcss-pxtorem仅对H5端有效且输出rem，小程序端需启用mp.css.px2rpx开关实现px转rpx；H5不支持rpx单位，小程序不走PostCSS流程。
uni-app 项目里 postcss-pxtorem 不起作用？先确认你用的是哪个 PostCSS 插件
uni-app 默认不内置 postcss-pxtorem，它只在 H5 平台支持 PostCSS 自动转换，且必须手动配置。小程序平台（如微信、支付宝）根本不会走 PostCSS 流程——它们的样式编译由 uni-app 自己的预处理器接管，postcss-pxtorem 在这里完全无效。
常见错误现象：px 写了一堆，真机调试发现尺寸没变小，H5 也没转成 rpx；或者控制台报错 postcss plugin not found。
- 如果你目标是「H5 端适配」：可用
postcss-pxtorem，但输出单位是rem，不是rpx（rpx是小程序专属单位，H5 不识别） - 如果你目标是「小程序端自动转 rpx」：uni-app 官方提供的是
scss/less编译时的px2rpx功能，和 PostCSS 无关，靠的是vue.config.js或vue.config.ts中的h5.postcss配置项根本不生效 - uni-app 的
rpx转换实际发生在webpack的style-loader后置阶段，由@dcloudio/uni-cli-shared内部处理，只认.vue文件中的<style></style>块里的px，且仅限于非scoped或带lang="scss"等预处理器的场景下才稳定触发
想让 .vue 文件里的 px 自动转 rpx，必须开 uni-app 内置的 px2rpx 开关
这个开关不依赖 PostCSS，而是 uni-app CLI 构建链路中硬编码的转换逻辑。它只对 <style></style> 标签内未加 !important、未被 v-bind() 动态生成、且未写在 @media 查询深层嵌套里的 px 值生效。
启用方式很简单，在项目根目录的 vue.config.js（或 vue.config.ts）中添加：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
h5: {
// 注意：这是 H5 的配置，不影响小程序
},
mp: {
// 小程序平台配置（微信/支付宝等）
css: {
// ⚠️ 关键：开启 px 转 rpx（仅对小程序生效）
px2rpx: true
}
}
}
注意：mp.css.px2rpx 是 uni-app 3.0+ 的写法；旧版（如 2.x）需写在 configureWebpack.chainWebpack 里通过插件注入，但已不推荐。
- 该转换只影响
.vue单文件组件内的<style></style>，对import './xxx.css'外部 CSS 文件无效 - 转换基准是 750rpx = 750px（即设计稿宽度），不可自定义；若设计稿是 375px，需先放大两倍写（比如写
32px表示 16px@375），否则会缩一半 - 使用
calc(100px + 20px)这类表达式时，px不会被转换
PostCSS 在 uni-app H5 端能做什么？只能转 rem，不能转 rpx
H5 平台走的是标准 Webpack + PostCSS 流程，所以你可以配 postcss-pxtorem，但它的目标单位是 rem，不是 rpx。强行设 unitToConvert: 'rpx' 会导致 H5 页面样式崩坏（浏览器不认识 rpx）。
如果坚持用 PostCSS 做 H5 适配，典型配置如下（放在 vue.config.js 的 h5.postcss 下）：
h5: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 37.5, // 以 375px 设计稿为例：375 / 10 = 37.5
propList: ['*'],
selectorBlackList: ['.no-rem']
})
]
}
}
- 此配置下，
16px→0.42666667rem，再配合 JS 设置document.documentElement.style.fontSize才能生效 - 不要试图在 H5 里输出
rpx，它不是标准 CSS 单位，Chrome/Firefox 会直接忽略 - 如果你同时开发 H5 和小程序，建议放弃 PostCSS 统一方案，H5 用
rem+ JS 动态根字体，小程序用内置px2rpx，二者逻辑独立更稳
为什么改了配置还是没转？检查这三处硬性限制
即使开了 mp.css.px2rpx: true，仍可能失效，原因往往卡在构建链路的“隐形规则”上：
-
<style scoped></style>中的px在某些版本（如 @dcloudio/uni-cli-shared - 使用了
lang="scss"但未安装sass和sass-loader，导致样式块未被正确解析，px2rpx步骤被跳过 - 在
App.vue或main.js中动态插入的<style></style>标签（如通过document.write注入），完全绕过编译流程，不可能被转换
最稳妥的验证方式：在某个页面的 <style></style> 里写 width: 100px;，构建后打开 dist/build/mp-weixin/pages/xxx/xxx.wxss，搜索是否变成 100rpx —— 不要看控制台或热更新结果，得看最终产出的 wxss 文件。
