微信小程序(四)屏幕適配

在WXSS中,引入了rpx(responsive pixel)尺寸單位。引用新尺寸單位的目的是,適配不同寬度的屏幕,開發起來更簡單。
如圖所示,同一個元素,在不同寬度的屏幕下,如果使用px爲尺寸單位,有可能造成頁面留白過多。
在這裏插入圖片描述

修改爲rpx尺寸單位,效果如圖所示。
在這裏插入圖片描述

小程序編譯後,rpx會做一次px換算。換算是以375個物理像素爲基準,也就是在一個寬度爲375物理像素的屏幕下,1rpx = 1px。
舉個例子:iPhone6屏幕寬度爲375px,共750個物理像素,那麼1rpx = 375 / 750 px = 0.5px。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章