vite how to px 2 rpx

[chentianxin]

vite how to px 2 rpx

[sonofmagic]

这个也是通过配置 postcss 插件做到 px->rpx 的，这里我们使用目前这方面最流行的 taro 团队的 postcss-pxtransform 来做，你可以这样配置:

    require('postcss-pxtransform')({
      platform: 'weapp',
      // https://taro-docs.jd.com/docs/size
      // 根据你的设计稿宽度进行配置
      // 可以传入一个 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
      }
    })

把它加到 postcss-rem-to-responsive-pixel 后面即可

可以参考配置: https://github.com/sonofmagic/uni-app-vite-vue3-tailwind-vscode-template/blob/main/postcss.config.cjs

[chentianxin]

感谢🙇‍