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

在WXSS中,引入了rpx(responsive pixel)尺寸单位。引用新尺寸单位的目的是,适配不同宽度的屏幕,开发起来更简单。
如图所示,同一个元素,在不同宽度的屏幕下,如果使用px为尺寸单位,有可能造成页面留白过多。
在这里插入图片描述

修改为rpx尺寸单位,效果如图所示。
在这里插入图片描述

小程序编译后,rpx会做一次px换算。换算是以375个物理像素为基准,也就是在一个宽度为375物理像素的屏幕下,1rpx = 1px。
举个例子:iPhone6屏幕宽度为375px,共750个物理像素,那么1rpx = 375 / 750 px = 0.5px。

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