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

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

之前如果是純h5的開發(fā)。rem用的比較多，用小程序的話 我們就要用rpx 進行設(shè)計。它自動幫我們完成轉(zhuǎn)換

同樣的 我們使用taro. 來做小程序和h5開發(fā)的話。其實也很簡單

如果 你的設(shè)計稿是按照 蘋果6的那個 750 設(shè)計的話
那個你量出來的是多少 就可以 直接寫多少 px

因為 taro 默認使用就是 750px
比如。設(shè)計稿是 200px. 那么 你就直接寫200 px 了就可以

但是 如果設(shè)計稿是 375的話。再寫200px。你會發(fā)現(xiàn) 會有點短。

簡單想一下，我們375的設(shè)計稿， 200px 按理說 已經(jīng)很不小了，已經(jīng)占據(jù) 3 /4 都差不多了。 為啥還是這么短，就是因為還是按照之前的750進行轉(zhuǎn)換的

如果還想達到750的那種效果，就需要我們轉(zhuǎn)換下
這個時候就需要我們配置下
config/index.js

designWidth: 375,  // 改成375
  deviceRatio: {
    '640': 2.34 / 2,
    '750': 1,
    '828': 1.81 / 2,
    '375': 2/1。  // 加上轉(zhuǎn)換比例
  },

我們在看下效果

這樣是不是很舒服了， 而且也自動幫我們適配了各種設(shè)備

當然如果你不想被轉(zhuǎn)化的可以 可以在樣式 上寫。 寫px的時候 寫成。Px 或者 PX

關(guān)注我 持續(xù)更新前端知識