Taro: 自定义配置deviceRatio，designWidth，postcss-pxtransform对小程序的px转换样式与官方文档描述不一致的疑问

[Zhouhaimei]

相关平台

小程序

小程序基础库: 无
使用框架: React

复现步骤

据官方文档描述：https://taro-docs.jd.com/taro/docs/size

如果你的设计稿是 375 ，不在以上三种之中，那么你需要把 designWidth 配置为 375，同时在 DEVICE_RATIO 中添加换算规则如下：

const DEVICE_RATIO = {
  '640': 2.34 / 2,
  '750': 1,
  '828': 1.81 / 2,
  '375': 2 / 1
}

所以在项目中配置了

  designWidth: 375,
  deviceRatio: {
    375: 2 / 1
  },

结果小程序样式不是预期的那样，代码里px均做了除以2的转换

看插件postcss-pxtransform实际转换规则也的确如此：

https://github.com/NervJS/taro/blob/20cc0288331a57118219c71abe9c9553f0615eab/packages/postcss-pxtransform/index.js#L48
https://github.com/NervJS/taro/blob/20cc0288331a57118219c71abe9c9553f0615eab/packages/postcss-pxtransform/index.js#L206
所以想请教一下这个是设计如此？如果不是，建议文档说明一下？

期望结果

无

实际结果

无

环境信息

👽 Taro v3.0.0-rc.3


  Taro CLI 3.0.0-rc.3 environment info:
    System:
      OS: macOS 10.15.3
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 12.16.2 - /usr/local/bin/node
      Yarn: 1.19.1 - /usr/local/bin/yarn
      npm: 6.14.4 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: next => 3.0.0-rc.6 
      @tarojs/mini-runner: next => 3.0.0-rc.6 
      @tarojs/react: next => 3.0.0-rc.6 
      @tarojs/runtime: next => 3.0.0-rc.6 
      @tarojs/taro: next => 3.0.0-rc.6 
      @tarojs/webpack-runner: next => 3.0.0-rc.6 
      babel-preset-taro: next => 3.0.0-rc.6 
      eslint-config-taro: next => 3.0.0-rc.6 
      react: ^16.10.0 => 16.13.1 
    npmGlobalPackages:
      typescript: 3.8.3

---

补充信息

无

[wangking873]

同上

[Zelda256]

我试了一下 改成这样是好的：

[jeange1003]

设置为：
375: 1 / 2
后，对less有效，但是对Taro.pxTransform没有效果

[luckyadam]

升级到最新版本试试，cli 和项目依赖均要升级

[sumaolin]

  Taro CLI 3.0.5 environment info:
    System:
      OS: Windows 7
    Binaries:
      Node: 12.18.3 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
      npm: 6.14.6 - C:\Program Files\nodejs\npm.CMD

环境下 designWidth 为640后 ，设置为640px宽度的页面并不能铺满当前页面

[wellssu0]

我用的414设计稿，按照文档上是应该这样改：

designWidth:414,
deviceRatio: {
  414: 1.81 / 1
},

但这样的比例是不对的。

我调整成:

designWidth:414,
deviceRatio: {
  414:  1 / 1.81
},

现在比例就就正常了