taro + vue3 编译不会把px转化为rem或rpx响应式单位

[yanbowe]

复现仓库
https://github.com/yanbowe/taro-vue3-pinia

编译到h5或小程序均不会转化为响应式单位

[MellowCo]

use rpx

[MellowCo]

我只对 rpx 做了 响应式单位 转换

[yanbowe]

use rpx

text-20rpx吗？那这样是不是就只能用在小程序编译了

[MellowCo]

会根据 h5 和 小程序，转换

[yanbowe]

会根据 h5 和 小程序，转换

好的谢谢，不过可以像taro一样把px转换为对应的单位吗😂

[MellowCo]

突然发现，小程序里的 rpx 是以750为标准，taro通过postcss修改css的，小程序里 unocss 生成的css没有经过 designWidth 😂

[yanbowe]

突然发现，小程序里的 rpx 是以750为标准，taro通过postcss修改css的，小程序里 unocss 生成的css没有经过 designWidth 😂

好像是的，看着大小表现不一致

[MellowCo]

taro h5 和 小程序的 rpx 转换不一致的吗。。。

小程序

h5

[yanbowe]

taro h5看着是直接把rpx当成px去转化成rem了

[MellowCo]

taro 根字体不同版本还不同的 。。。
NervJS/taro#12361

[MellowCo]

taro 根字体不同版本还不同的 。。。 NervJS/taro#12361

我说为什么 两边字体大小不同 。。。

[MellowCo]

升级到 0.1.11

• 针对 taro 将 px 转化为 rem 或 rpx 响应式单位
• deviceRatio: px 设计稿尺寸换算规则
• taroWebpack: 针对 webpack4 和 webpack5 rem 不同，指定 rem 策略

presetWeapp(
      // 375 标准
      {
        isH5: process.env.TARO_ENV === 'h5',
        platform: 'taro',
        designWidth: 375,
        deviceRatio: {
          375: 2 / 1,
          750: 1,
        },
        taroWebpack: 'webpack5'
      }
    ),

[MellowCo]

640 的标准，应该没什么问题了

• config/index.js

const config = {
  projectName: 'Taro3',
  date: '2021-12-18',
  designWidth: 640,
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2,
    375: 2 / 1
  },
}

• unocss.config.ts

    presetWeapp({
      // h5兼容
      isH5: process.env.TARO_ENV === 'h5',
      platform: 'taro',
      designWidth: 640,
      deviceRatio: {
        640: 2.34 / 2,
        750: 1,
        828: 1.81 / 2,
        375: 2 / 1
      },
      taroWebpack: 'webpack5'
    })

[yanbowe]

640 的标准，应该没什么问题了

• config/index.js

const config = {
  projectName: 'Taro3',
  date: '2021-12-18',
  designWidth: 640,
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2,
    375: 2 / 1
  },
}

• unocss.config.ts

    presetWeapp({
      // h5兼容
      isH5: process.env.TARO_ENV === 'h5',
      platform: 'taro',
      designWidth: 640,
      deviceRatio: {
        640: 2.34 / 2,
        750: 1,
        828: 1.81 / 2,
        375: 2 / 1
      },
      taroWebpack: 'webpack5'
    })

那设计稿是375的话，也是需要设置成640吗？

[MellowCo]

640 的标准，应该没什么问题了

• config/index.js

const config = {
  projectName: 'Taro3',
  date: '2021-12-18',
  designWidth: 640,
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2,
    375: 2 / 1
  },
}

• unocss.config.ts

    presetWeapp({
      // h5兼容
      isH5: process.env.TARO_ENV === 'h5',
      platform: 'taro',
      designWidth: 640,
      deviceRatio: {
        640: 2.34 / 2,
        750: 1,
        828: 1.81 / 2,
        375: 2 / 1
      },
      taroWebpack: 'webpack5'
    })

那设计稿是375的话，也是需要设置成640吗？

和 taro config 里的保持一致就行，我只是用 640 测试了下

[yanbowe]

640 的标准，应该没什么问题了

• config/index.js

const config = {
  projectName: 'Taro3',
  date: '2021-12-18',
  designWidth: 640,
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2,
    375: 2 / 1
  },
}

• unocss.config.ts

    presetWeapp({
      // h5兼容
      isH5: process.env.TARO_ENV === 'h5',
      platform: 'taro',
      designWidth: 640,
      deviceRatio: {
        640: 2.34 / 2,
        750: 1,
        828: 1.81 / 2,
        375: 2 / 1
      },
      taroWebpack: 'webpack5'
    })

那设计稿是375的话，也是需要设置成640吗？

和 taro config 里的保持一致就行，我只是用 640 测试了下

谢谢大佬，375测试了一下也可以了👍

[MellowCo]

你是mac电脑，@unocss/webpack 0.45.8 之后，unocss 会不生成 css 代码
unocss/unocss#1455
难道是 windows 特有的 bug 吗 😂

[yanbowe]

你是mac电脑，@unocss/webpack 0.45.8 之后，unocss 会不生成 css 代码 unocss/unocss#1455 难道是 windows 特有的 bug 吗 😂

我用的是mac，倒是没遇到过这种情况😂