我們都知道移動端設備 根據設備的不同 可能展示出來的東西會有點不太一樣

特別是 寬度的問題，同樣的寬度 在不同的手機 用戶看到的可能是不一樣的效果，這樣是不是就太糟糕了。

之前如果是純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

關注我 持續更新前端知識