CSS 单位转化

rem 转 rpx (或 px)

在 rem 转 rpx (或 px) 章节，我们做了 CSS 中 rem 转化成 px / rpx 的方式。

但是除了 rem 转 rpx (或 px)，我们可能也有 px 转 rpx 的需求，这种情况实际上也很容易就能做到。

px 转 rpx

4.3.0 以后

从 [email protected] 开始，我们内置了 postcss-pxtransform 插件，提供了开箱即用的 px 转 rpx 的方式。

只需传入配置项:

// vite
import { UnifiedViteWeappTailwindcssPlugin } from 'weapp-tailwindcss/vite'
UnifiedViteWeappTailwindcssPlugin({
  // ...other-options
  px2rpx: true
})
// webpack
const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack')
new UnifiedWebpackPluginV5({
  // ...other-options
  px2rpx: true
})

只需传入一个 true，你写的所有的 px 都会被 1:1 的转换成 rpx，比如 10px -> 10rpx

当然这个选项也可以传入一个 object, 这个默认值和参数，可以参考 postcss-pxtransform 插件。

如果希望 px 按 1:2 转换成 rpx（例如 10px -> 20rpx），可以传入下面配置：

// vite
import { UnifiedViteWeappTailwindcssPlugin } from 'weapp-tailwindcss/vite'
UnifiedViteWeappTailwindcssPlugin({
  // ...other-options
  px2rpx: {
    designWidth: 375,
    deviceRatio: {
      375: 2,
    },
  },
})

4.3.0 以前

这里我们使用 postcss-pxtransform 这个 postcss 插件来做。

postcss-pxtransform 由京东团队出品，应该是目前质量最高的 px 转 rpx 插件，而且已经被内置在了 tarojs 框架内

安装插件

npm

npm i -D postcss-pxtransform

Yarn

yarn add --dev postcss-pxtransform

pnpm

pnpm add -D postcss-pxtransform

Bun

bun add --dev postcss-pxtransform

注册到 postcss 配置中

postcss.config.js

module.exports = {
  plugins: {
    'tailwindcss': {},
    'autoprefixer': {},
    // 下方为 px 转 rpx 区域
    'postcss-pxtransform': {
      platform: 'weapp',
      // 根据你的设计稿宽度进行配置
      // 可以传入一个 function
      // designWidth (input) {
      //   if (input.file.replace(/\\+/g, '/').indexOf('@nutui/nutui-taro') > -1) {
      //     return 375
      //   }
      //   return 750
      // },
      designWidth: 750, // 可以设置为 375 等等来应用下方的规则,
      deviceRatio: {
        640: 2.34 / 2,
        // 此时应用到的规则，代表 1px = 1rpx
        750: 1,
        828: 1.81 / 2,
        // 假如你把 designWidth 设置成 375 则使用这条规则 1px = 2rpx
        375: 2 / 1,
      },
    },
  },
}

这样就能进行转化了，此时假如你写 w-[20px] 这种 class 它最终生效的样式会经过 postcss-pxtransform 转化，转变为 width: 20rpx, 当然这取决于你传入插件的配置，比如设计稿宽度 (designWidth)

你可以在 taro 官网的设计稿及尺寸单位章节内 查看这个插件的所有用法。

另外，假如你要禁止单个文件 px 转 rpx，可以在样式表文件内头部，添加 /*postcss-pxtransform disable*/ 这样的注视，禁用该文件 px 转 rpx。

多单位转 px（unitsToPx）

在 uni-app x 等官方推荐使用 px 的场景，可以启用 unitsToPx，把 rem/em/vw/vh/vmin/vmax/rpx 等单位转换为 px。默认关闭。

// vite
import { UnifiedViteWeappTailwindcssPlugin } from 'weapp-tailwindcss/vite'
UnifiedViteWeappTailwindcssPlugin({
  // ...other-options
  unitsToPx: true,
})

// webpack
const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack')
new UnifiedWebpackPluginV5({
  // ...other-options
  unitsToPx: {
    unitPrecision: 2,
    unitMap: {
      rem: 16,
      rpx: 0.5,
      vw: 3.75,
    },
  },
})

启用后（默认单位表）：

• 1rem → 16px
• 2rpx → 1px

注意：如果同时开启 px2rpx / rem2rpx，unitsToPx 会先转换成 px，后续还会继续转成 rpx。如果希望最终输出为 px，请不要同时开启 px2rpx / rem2rpx。