关于尺寸转换的想法

[robinv8]

在 Taro 中尺寸单位建议使用 px、 百分比 %，Taro 默认会对所有单位进行转换。在 Taro 中书写尺寸按照 1:1 的关系来进行书写，即从设计稿上量的长度 100px，那么尺寸书写就是 100px，当转成微信小程序的时候，尺寸将默认转换为 100rpx，当转成 H5 时将默认转换为以 rem 为单位的值。 — 引用

以上是引用自Taro 文档中的一句话，而 Taro 是一个开放式跨端跨框架解决方案，因本着保留各端原有的使用习惯基础上，抹平各端间的差异。

环境

单位：px、rpx、rem
端：h5、小程序、rn

单位转换

	px	rpx	rem
h5	rem	不支持	不转换
小程序	rpx	不转换	不转换
rn	不转换	不支持	px

单位支持情况

	px	rpx	rem
h5	支持	不支持	支持
小程序	支持	支持	支持
rn	不支持	不支持	不支持

现状

1. h5 下 rpx 失效，px 被转成 rem，只能依靠 html 标签的 font-size 做自适应
2. 小程序，三种单位都支持
3. rn 下， rpx 报错，px 会按照尺寸转换规则进行转换，rem 跳过尺寸转换规则

存在的问题

忽略单位混用的情况

存在单位混用的场景

1. 引用第三方库，如：bootstrap
2. 从单端到多端，如：小程序到 RN （rn 下 rpx 报错）
3. 个人习惯

期望

1. 按照 16px = 16rpx = 1rem 为基础原则，设定参考单位，比如，以 px 为基础单位，通过单位转换，把各端不支持的单位转换为基础单位
2. 增加尺寸转换范围配置，例如：文件路径、需转换的单位

相关 issues

#1251
#8646

[zhiqingchen]

https://github.com/wuba/taro-playground/blob/main/src/pages/global/pages/styles/size.tsx

H5	小程序	RN

[robinv8]

通常情况下 1rem = 16px，2rem = 32px，可目前显示效果，30px 和 2rem 有明显差距，虽然可以使用 PX，但这不符合 web 使用规范，Taro 可以制定转换规则，但如果保留默认的规范，那就更好了

[zhiqingchen]

h5 的rem基准可以调整一下，三端就基本一致了。

rpx的话，应该是比较容易支持上的。

[robinv8]

我翻了之前的 issues，原本是支持 rpx、rem 做尺寸转换的，现在能配置化吗？因为我们项目全都是以 rem 为单位，如果改成 px 通用性就降低了

[robinv8]

我的想法，也没有推翻现有的设计，只是增加几个配置，在现有功能的基础上，实现更通用的尺寸及单位转换策略，例如：

{
   "defaultUnit": "px",
   "unitRatio": {
        "px": 16,
        "rpx": 16,
        "rem": 1
   },
 "conversionUnit": ['px']
}

[zhiqingchen]

那是可以的。
只是把现有的配置参数抽出来，变成可配的吧？

[robinv8]

是的，这个需求我也处理吧，我会在不改变现有逻辑的情况下，把配置抽离处理。

这个问题比较紧急，在我们项目中，同一规格的 Button ，在 rn 和 h5 中大小不一致。

[zhiqingchen]

急的话，可以patch修一下h5的rem计算方式。

1. 修正 postcss-pxtransform h5 rootValue 的计算。
2. 修正 index.html中font-size的计算。

[zhiqingchen]

375px（iPhone 6）

taro h5

e.style.fontSize=t>=640?"40px":t<=320?"20px":t/320*20+"px"

1rem = 23.4375px

小程序

https://cloud.tencent.com/developer/article/1782718

微信小程序的rem尺寸单位，rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1rem = (750/20)rpx =37.5rpx;
微信的自适应单位，同时微信规定：屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px。

1rem = 18.75px

对rem单位使用小程序与h5进行统一

1. 修正 postcss-pxtransform h5 rootValue 的计算。
2. 修正 index.html中font-size的计算。

[ZakaryCode]

h5 场景和小程序终究是不一样的， rem 的使用不可能忽略更多的场景和小程序完全对齐

[ZakaryCode]

看到有点晚了 😂

[ZakaryCode]

另外关于 rpx 的转换，在 h5 可以支持，计算依据为 1rpx = 0.5px，目标单位 rem，如果需要根据屏幕适配可以使用 vw

[ZakaryCode]

h5 在 3.5-beta 版本中已经支持了 rpx 转换，同 px 转换策略；同时支持开发者配置的 deviceRatio，但从低版本项目升级时需要更新 src/index.html 文件。

h5 版本仍然限制 rootValue 最大最小值，如果需要全平台统一可以自行配置

// ...
 h5: {
   postcss: {
     pxtransform: {
       enable: true,
       config: {
         max: Infinity,
         min: 0
       }
     },
   }
 }
// ...

[zhiqingchen]

666

[robinv8]

rn 端这样处理有些问题，例如，我需要在 rn 上设置 fontSize: 16，不管是用 rem 还是 px 都无法得到 16

export function getWrapedCSS (css) {
  return `
      import { StyleSheet, Dimensions } from 'react-native'
      
      // 一般app 只有竖屏模式，所以可以只获取一次 width
      const deviceWidthDp = Dimensions.get('window').width
      const uiWidthPx = 375
      
      function scalePx2dp (uiElementPx) {
        return uiElementPx * deviceWidthDp / uiWidthPx
      }
      
      // 用来标识 rn-runner transformer 是否读写缓存
      function ignoreStyleFileCache() {}
      
      export default StyleSheet.create(${css})
`
}

[robinv8]

通过这次交流讨论，收获颇多，感谢 @zhiqingchen 的耐心指导，还有个小小的建议，把如下计算尺寸的功能，抽离成配置，方便迁移到 Taro 的项目

 function scalePx2dp (uiElementPx) {
        return uiElementPx * deviceWidthDp / uiWidthPx
 }