细解小程序自适应单位rpx

由于手机终端屏幕大小的差异,小程序页面设计的适配问题就比较突出了。因此,微信小程序推出了新尺寸单位rpx(responsive pixel): 可以根据屏幕宽度进行自适应,并规定屏幕宽度为750rpx。注意是750rpx,重要的事再强调下,是750rpx。大家在设计页面时尺寸单位尽量选择rpx,按照750进行设计,那么就不用担心平台适配问题了,是不是很方便呢?

也许有同学会好奇,为什么是750rpx呢?这是因为微信小程序官方是推荐以iPhone 6为标准进行页面设计。在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

所以,大家在开发工具的模拟器上进行页面预览时,最好是选用iPhone6进行开发哦,这样调试会方便很多,2rpx=1px,整数倍好换算。另外注意,rpx这个单位是小程序独有的,只能在小程序设计中使用哦。

发表评论