taro 中设计稿尺寸相关问题，以及自适应页面写法

我们都知道移动端设备 根据设备的不同 可能展示出来的东西会有点不太一样

特别是 宽度的问题，同样的宽度 在不同的手机 用户看到的可能是不一样的效果，这样是不是就太糟糕了。

之前如果是纯h5的开发。rem用的比较多，用小程序的话 我们就要用rpx 进行设计。它自动帮我们完成转换

同样的 我们使用taro. 来做小程序和h5开发的话。其实也很简单

如果 你的设计稿是按照 苹果6的那个 750 设计的话
那个你量出来的是多少 就可以 直接写多少 px

因为 taro 默认使用就是 750px
比如。设计稿是 200px. 那么 你就直接写200 px 了就可以

但是 如果设计稿是 375的话。再写200px。你会发现 会有点短。

简单想一下，我们375的设计稿， 200px 按理说 已经很不小了，已经占据 3 /4 都差不多了。 为啥还是这么短，就是因为还是按照之前的750进行转换的

如果还想达到750的那种效果，就需要我们转换下
这个时候就需要我们配置下
config/index.js

designWidth: 375,  // 改成375
  deviceRatio: {
    '640': 2.34 / 2,
    '750': 1,
    '828': 1.81 / 2,
    '375': 2/1。  // 加上转换比例
  },

我们在看下效果

这样是不是很舒服了， 而且也自动帮我们适配了各种设备

当然如果你不想被转化的可以 可以在样式 上写。 写px的时候 写成。Px 或者 PX

关注我 持续更新前端知识