1. 程式人生 > >小程式中使用rpx單位,佈局適配方案(rpx、px、vw、vh)

小程式中使用rpx單位,佈局適配方案(rpx、px、vw、vh)

1:小程式中使用rpx單位

rpx單位是微信小程式中css的尺寸單位,rpx可以根據螢幕寬度進行自適應。

規定螢幕寬為750rpx。如在 iPhone6 上,螢幕寬度為375px,共有750個物理畫素,則750rpx = 375px = 750物理畫素,1rpx = 0.5px

裝置 rpx換算px (螢幕寬度/750) px換算rpx (750/螢幕寬度)
iPhone5 1rpx = 0.42px    1px = 2.34px
iPhone6 1rpx = 0.5px     1px = 2rpx
iPhone6s 1rpx = 0.552px    1px = 1.81rpx

微信小程式也支援rem尺寸單位,rem和rpx的換算關係:rem: 規定螢幕寬度為20rem;1rem = (750/20)rpx =37.5rpx;

注:開發微信小程式時設計師可以用 iPhone6 作為視覺稿的標準,單位換算相對簡單

2:佈局適配方案(rpx、px、vw、vh)

rpx適配

rpx是小程式中的尺寸單位,它有以下特徵:
小程式的螢幕寬固定為750rpx(即750個物理畫素),在所有裝置上都是如此
1rpx=(screenWidth / 750)px,其中screenWidth為手機螢幕的實際的寬度(單位px),例如iphone6的screenWidth=375px,則在iphone6中1rpx=0.5px
由上可知,在不同裝置上rpx與px的轉換是不相同的,但是寬度的rpx卻是固定的,所以可以使用rpx作為單位,來設定佈局的寬高。

vw、vh適配

vw和vh是css3中的新單位,是一種視窗單位,在小程式中也同樣適用。
小程式中,視窗寬度固定為100vw,將視窗寬度平均分成100份,1份是1vw
小程式中,視窗高度固定為100vh ,將視窗高度平均分成100份,1份是1vh
所以,我們在小程式中也可以使用vw、vh作為尺寸單位使用在佈局中進行佈局,但是一般情況下,百分比+rpx就已經足夠使用了,所以它們的出場機會很少。