?

因?yàn)樾〕绦蚴且晕⑿艦槠脚_(tái)運(yùn)行的，可以同時(shí)運(yùn)行在android與ios的設(shè)備上，所以不可避免的會(huì)遇到布局適配問題，特別是在iphone5上，因?yàn)槠聊怀叽缧〉木壒?#xff0c;也是適配問題最多的機(jī)型，下面就簡(jiǎn)單介紹幾種適配方法。

?

rpx適配

rpx是小程序中的尺寸單位，它有以下特征：

• 小程序的屏幕寬固定為750rpx（即750個(gè)物理像素），在所有設(shè)備上都是如此
• 1rpx=（screenWidth / 750）px，其中screenWidth為手機(jī)屏幕的實(shí)際的寬度（單位px），例如iphone6的screenWidth=375px，則在iphone6中1rpx=0.5px

由上可知，在不同設(shè)備上rpx與px的轉(zhuǎn)換是不相同的，但是寬度的rpx卻是固定的，所以可以使用rpx作為單位，來設(shè)置布局的寬高。

vw、vh適配

vw和vh是css3中的新單位，是一種視窗單位，在小程序中也同樣適用。

• 小程序中，窗口寬度固定為100vw，將窗口寬度平均分成100份，1份是1vw
• 小程序中，窗口高度固定為100vh ，將窗口高度平均分成100份，1份是1vh

所以，我們?cè)谛〕绦蛑幸部梢允褂胿w、vh作為尺寸單位使用在布局中進(jìn)行布局，但是一般情況下，百分比+rpx就已經(jīng)足夠使用了,所以它們的出場(chǎng)機(jī)會(huì)很少。

?

?

轉(zhuǎn):??https://www.jianshu.com/p/fc08527604a1

?

轉(zhuǎn)載于:https://www.cnblogs.com/fps2tao/p/11098204.html

總結(jié)

以上是生活随笔為你收集整理的微信小程序填坑之路（三）：布局适配方案（rpx、px、vw、vh）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。