微信小程序：rpx详解，使用 tailwindcss最佳方案rem转rpx

Z_Wonderful2024-07-09 16:31

rpx详解

不管手机的屏幕宽度是多少，微信小程序都负责把这个宽度平均分成 750 份，而把这分好过的 750 份中的 1 份取名叫 1rpx。

tailwindcss rem转rpx

配置 rem 转 rpx

安装配置好了 tailwindcss，接下来一步便是配置 rem 转 rpx
tailwindcss 里面工具类的长度单位，默认都是 rem，比如:

c 复制代码

.p-4{
  margin: 1rem; //16px
}
.p-4{
  height: 1rem;  //16px
}

小程序里面，我们大部分情况都是使用 rpx 这个单位来进行自适应，所以就需要把默认的 rem 单位转化成 rpx

配置tailwindcss单位转化

两种转化方式(二者选其一即可)

1、想要把项目里所有的 rem 都转化成 rpx，那么 postcss plugin: postcss-rem-to-responsive-pixel 适合你。

c 复制代码

npm i -D postcss-rem-to-responsive-pixel

安装好之后，把它注册进你的 postcss.config.js 即可:

c 复制代码

module.exports = {
  plugins: {
		tailwindcss: {},
		'postcss-rem-to-responsive-pixel': {
      // 32 意味着 1rem = 32rpx
      rootValue: 32,
      // 默认所有属性都转化
      propList: ['*'],
      // 转化的单位,可以变成 px / rpx
      transformUnit: '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 适合你。

c 复制代码

npm i -D tailwindcss-rem2px-preset

然后在 tailwind.config.js 中，注册这个预设：

c 复制代码

module.exports = {
  presets: [
    require('tailwindcss-rem2px-preset').createPreset({
      // 意味着 1rem = 32rpx
      fontSize: 32,
      // 转化的单位  px / rpx
      unit: 'rpx'
    })
  ],
}