移动分辨率和rpx

从一张设计图的实现说起，为什么模拟器下ip6的分辨率是375而设计图一般给750？

看上面的这张图，首先屏幕尺寸就是实际的物理尺寸，重点是分辨率pt和分辨率px，要回答这个问题，就要明白pt与px。那么什么是pt呢？pt又叫做逻辑分辨率,简单的理解可以理解为长度单位。他只和屏幕尺寸有关系，3和4都是320pt。为什么5也是320pt呢？是因为高度变了，所以尺寸更大一点。但是他的宽度都是320的逻辑分辨率。所以简单的理解他这个pt跟屏幕的尺寸有关系。他就是一个长度单位。

 

那么px是什么概念呢？我们叫他叫做物理分辨率。他和屏幕的尺寸没有任何关系，他也不是一个视觉单位。简单一点，可以理解一个像素点。我们看到的图片都是由很多个像素点构成的。为什么他不是一个长度相关的单位呢？我们只能描述有多少个点，不能描述是多大的点。

 

所以这能得到pt与px的一个关系，就是一个pt里面有几个px。或者说一个pt里面能够包含多少个px。那么为什么4比3的屏幕效果更好一些呢？这个就是逻辑分辨率里面包含的物理像素点个数有关系。3和4的逻辑分辨率都是320*480。关键在于它们的物理分辨率不一样。4对应是640＊960。3对应的是320*480。同样的长度，3少一半。

 

所以Reader下面是1倍，2倍的关系。这个表示什么呢？这个表示同一个pt下面包含了多少个px。我们同一个单位下面，物理点越多，图像的显示越细腻，越清晰。6plus是3倍。每单位下面比6多出一个像素点。理论上是更清晰的。但是人眼分辨不出来，2倍已经是人眼能够分辨的极限。

 

最后是这个ppi。ppi是什么概念，他和Reader的概念是一样的。Reader的意思是每个pt下面包含多少个px。ppi表示每一寸包含多少个物理像素点。所以这个163是怎么得出来的。3.5寸表示的是对角线的距离，那么对角线的距离知道了，那怎么求这个163呢，就是勾股定理，320*480平方开根号再除以3.5寸得到的。

 

所以设计师是根据物理分辨率给的，不是根据逻辑分辨率给。所以6下面是2倍关系。

 

总结：

1、pt也称为逻辑分辨率

2、pt的大小和屏幕尺寸有关系，简单可以理解为长度和视觉单位

3、px指物理分辨率，和屏幕尺寸没有关系。因为点没有大小，只有多少个。

a、1个pt可以有1个px构成，也可以有2个，还可以有3个甚至更多构成。

b、ip6下2个px才构成1个pt。

如何适配不同的机型？

所以设计图给的是物理像素750px，但我们做图的时候，width里面的px指的是逻辑分辨率，不是物理分辨，所以设置宽度的时候需要/2，375px。但是我们不会只针对一种机型，要在不同的机型下作图。375是ip6下面的逻辑分辨率，但是到了ip6plus就不好用了，ip6plus是414。换成414后，切成ip5又不行了，只显示一半的图片。这样肯定不行，那怎么办？

需要自动去换算，根据不同的机型，自动去算单位

使用rpx，小程序会自动在不同的分辨率下进行转换，而使用px不会。为什么不会，因为在小程序下面，这个px指的是逻辑分辨率，也就是长度单位。是个视觉单位，所以长度是一定的。

ip6下 1px = 1rpx = 0.5pt

所以设计图是按照ip6下设计的，那么这里的px跟小程序里面的rpx是 1:1 的关系

<image src="/images/timg.jpeg" style="width:750rpx; "></image>

为什么要在ip6的物理分辨率来做设计图？为什么这里的750rpx就能适配所有的机型？

因为在ip6下，很好换算。1比1的关系。那么ip6下750rpx刚刚好称满屏幕。在ip6 plus下，750rpx就不是750px的逻辑分辨率，而是750/0.6=1250的逻辑像素。也是撑满ip6 plus。当时小程序就是依ip6来设计的，然后根据不同的逻辑分辨率换算出不同的rpx。所以按照ip6的物理像素写，就能自动的转换各种屏幕

ip6下 1px = 1rpx

ip6 plus下 1px = 0.6rpx

所以rpx是根据不同的机型做自适应调整的，但是有时候不需要自适应调整，就不能用rpx