【干货#012】细解小程序自适应单位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这个单位是小程序独有的,只能在小程序设计中使用哦。


【干货#012】细解小程序自适应单位rpx_第1张图片


更多实战干货,可查看:

小程序页面滚动实现广告条隐藏

细解小程序自适应单位rpx

小程序实现地址自动解析和导航

小程序"页面滚动"与"滚动视图区域"区别

小程序使用有赞ZanUI


更多常见错误,可查看:

解决 Page[pages/XXX/XXX] not found错误

解决"Failed to load image"错误


关注晓程序干货店,分享小程序开发干货知识

【干货#012】细解小程序自适应单位rpx_第2张图片



你可能感兴趣的:(小程序前端,ui,小程序,微信,移动)