写了这么久的小程序,一直在使用小程序原生的rpx单位,它到底和px有什么不同?rpx在不同设备中到底是如何做自适应的?很多东西虽然一直在使用,但往往忽略了最基本的原理,这一点是非常可怕的。

进入正题,先看看小程序官方对于rpx的一些解释:



可以看出:1、小程序规定所有的设备屏幕宽度统一为750rpx

2、小程序官方推荐使用iPhone6(屏幕宽度为375px)作为设计稿标准

其实不光是小程序,基本上现在做移动端的项目,设计稿的尺寸要求都是750px,那为什么这样设计?为什么要统一为750px?而不是700px或者800px、1000px呢?

首先,1:1切给pad用, 不会有失真, 2:1(换算后是375)切给手机, 由于现在大多数移动端页面是采用rem布局实现的, 对于375及其以下的手机屏幕自然不会失真,而对于375以上的手机设备,比如iphone6 plus 414的分辨率将会有少许失真,图片将会被放大10%左右,这是一个比较完美的折衷方案,因为我们不可能为每一种分辨率设计一套方案,所以注定会有一些设备上的图是失真的,那又有人问为什么不做个比较大的设计稿,夸张一点做成10000px宽,这样做的话能解决图片的失真问题,但是图片太大必定会占用更多的带宽, 从而导致加载过慢, 带来不好的用户体验。

其实就是针对当前主流设备屏幕做出的最大兼容方案,用750px可以兼顾到大部分情况。

那么小程序中,相当于将所有设备(不论屏幕尺寸是多少)的屏幕切割为750份,即 1rpx=window.innerWidth/750,其实就是系统级的rem适配方案,同时也不用使用JS进行根元素字体尺寸的设置;

为什么小程序官方推荐使用iPhone6作为设计稿标准,即iPhone6的屏幕分辨率为375px,但由于iPhone的retain视网膜屏幕,比如iPhone6存在2倍缩放,那么实际的逻辑分辨率就有750px,也应该按照750px去给iPhone6切图使用,否则图片很模糊看不清;

举例:设计图的尺寸为750px,假如有一个元素,在设计图中的长度为100px,那么在小程序中,设备选择iPhone6,直接写 width:100rpx,我们从头再来计算一次,iPhone6手机375px的屏幕,375px 分为 750份,每份就有 0.5px,那么100rpx实际就是 50px,占的百分百为 50/375 = 13.33%,在iPhone6设备上就能完美显示;在iPhone6 Plus中,100rpx对应 414/750*100 = 55.2px,占的百分比为 55.2/414 = 12.68%,虽然存在极小的差异,但基本上实现了不同尺寸屏幕的适配方案。

感谢阅读~