Closed chentianxin closed 10 months ago
这个也是通过配置 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
后面即可
感谢🙇
请问 vite uniapp vue3 项目如何把 tailwindcss px 转换成 rpx 配置项如下