1. 程式人生 > >小程式的尺寸單位rpx和px

小程式的尺寸單位rpx和px

rpx(responsive pixel)

是WXSS中引入的新的尺寸單位,可以適配不同的螢幕寬度,規定螢幕寬度為750rpx.

<view style="width:200rpx;height:200rpx;background-color:#00ff00;margin-top:100rpx;margin-left:100rpx;">ic</view>
<view style="width:200px;height:200px;background-color:#00ff00;margin-top:100px;margin-left:100px;">ic</view>

效果展示:

會明顯的感覺到在兩種手機模式下,用了px的正方形的位置有了明星的變化,這就是px相對於rpx的缺陷,

換算基準:

以375個物理畫素為基準,即在一個寬度為375物理畫素的螢幕下,1rpx=1px;

舉個例子,在iphone6的螢幕下:

螢幕寬度為375px,共有750個物理畫素   1rpx=375/750=0.5px;

一些常用裝置的單位換算如下: