移动分辨率和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="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

原文地址:https://www.cnblogs.com/wzndkj/p/11117907.html