微信小程序：rpx详解，使用 tailwindcss最佳方案rem转rpx
rpx详解
不管手机的屏幕宽度是多少，微信小程序都负责把这个宽度平均分成 750 份，而把这分好过的 750 份中的 1 份取名叫 1rpx。
tailwindcss rem转rpx
配置 rem 转 rpx
安装配置好了 tailwindcss，接下来一步便是配置 rem 转 rpx
tailwindcss 里面工具类的长度单位，默认都是 rem，比如:
.p-4{margin: 1rem; //16px
}
.p-4{height: 1rem; //16px
}
小程序里面，我们大部分情况都是使用 rpx 这个单位来进行自适应，所以就需要把默认的 rem 单位转化成 rpx
配置tailwindcss单位转化
两种转化方式(二者选其一即可)
1、想要把项目里所有的 rem 都转化成 rpx，那么 postcss plugin: postcss-rem-to-responsive-pixel 适合你。
npm i -D postcss-rem-to-responsive-pixel
安装好之后，把它注册进你的 postcss.config.js 即可:
module.exports = {plugins: {tailwindcss: {},'postcss-rem-to-responsive-pixel': {// 32 意味着 1rem = 32rpxrootValue: 32,// 默认所有属性都转化propList: ['*'],// 转化的单位,可以变成 px / rpxtransformUnit: 'rpx'// postcss-rem-to-responsive-pixel@6 版本添加了 disabled 参数，用来禁止插件的转化// disabled: process.env.TARO_ENV === 'h5' || process.env.TARO_ENV === 'rn'}}
}
2、只把项目里 tailwindcss 生成的工具类的单位，从 rem 转变为 rpx，那么 tailwindcss preset: tailwindcss-rem2px-preset 适合你。
npm i -D tailwindcss-rem2px-preset
然后在 tailwind.config.js 中，注册这个预设：
module.exports = {presets: [require('tailwindcss-rem2px-preset').createPreset({// 意味着 1rem = 32rpxfontSize: 32,// 转化的单位 px / rpxunit: 'rpx'})],
}