微信小程序 iphone6 和 iphone6plus 如何设置rpx单位,通俗易懂的方法

clipboard.png

pt:屏幕物理像素(屏幕实际宽度像素) px:屏幕分辨率 pt和px关系:iphone6plus
ppi密度高,1pt里有3px,iphone6 1pt里有2px。小程序

iphone6宽度 (物理像素) :375pt,1pt含有2px, 分辨率(设计图) 750px。
iphone6plus宽度(物理像素):414pt,1pt含有3px,分辨率(设计图)1252px。微信小程序

rpx换算微信

换算公式:750/屏幕实际宽度(pt)iphone

iphone6plus(@3x) px换算rpx:spa

750/414=1.8115942028985508rpx
在设计图中,设计图大小为1252px;
若是一个宽度为30px换算rpx:
30/3*1.8115942028985508=8.115942028985508;
因此在微信小程序中,直接填写8.115942028985508rpx便可。设计

iphone6(@2x) px换算 rpx:
750/375=2rpx;
在设计图中,设计图大小为750px;
若是一个宽度为30px换算rpx:
30/2*2=30rpx
因此在微信小程序中,直接填写30rpx便可。blog

rpx是在不一样屏幕下能够适配的,因此使用rpx单位只要在一种设计图下适配,均可以在不一样设备大小本身调节大小
经过以上例子看出作小程序时,须要设计图为以iphone6手机大小设计方案最佳!!ip

相关文章
相关标签/搜索