【Taro】designWidth和deviceRatio的作用

DEVICE_RATIO 在 Taro 中的作用是将设计稿的尺寸转换为实际设备上的尺寸，以便在不同尺寸的设备上实现一致的设计效果。

具体换算关系如下：

1. 设计稿尺寸（designWidth）：这是你的设计稿的宽度，比如 375px，750px 等。
2. 实际设备尺寸：这是你应用运行时设备的宽度，比如 iPhone 的 375px 等。
3. 设备比例（deviceRatio）：这是一个比例，用于将设计稿的尺寸转换为实际设备上的尺寸。

Taro 会根据 designWidth 和 deviceRatio 进行尺寸换算。换算公式如下：

实际像素值 = 设计稿像素值 / deviceRatio[设计稿宽度]

举个例子，如果你的设计稿宽度是 375px（designWidth），在 config/index.js 中设置 deviceRatio 如下：

module.exports = {
  designWidth: 375,
  deviceRatio: {
    375: 2,  // 表示设计稿的1个像素对应设备的2个像素
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2
  }
}

假设你有一个元素在设计稿中的宽度是 100px，那么在设备上实际显示的宽度计算如下：

实际像素值 = 100px / deviceRatio[375] = 100px / 2 = 50px

这意味着，在设计稿中设置为 100px 的元素，在设备上实际显示的宽度为 50px。

总结

deviceRatio 的作用是根据设计稿与实际设备的宽度比例，自动调整元素的尺寸，使其在不同设备上显示一致。通过设置 deviceRatio，你可以确保设计稿中的尺寸在不同设备上转换成合适的实际尺寸。