为什么小程序模拟器下面Iphone6的分辨率是375,而设计图一般给750??会不会是设计师搞事情?so?分析一下再决定打不打设计师。。。


先来张图

“移动设备分辨图解”
“移动设备分辨图解”

PT是什么?

逻辑分辨率,长度单位,视觉看到的,比如iphone 3GS和iphone 4/4S,屏幕都是3.5寸,所以逻辑分辨率都是320X480,iphone 5/5s因为高度更大一点所以是320X568,

所以逻辑分辨率简单的理解是与屏幕的物理尺寸有关系,但是其实是与移动设备的三个渲染有关系,这要更深入了解,所以可以理解为是一个长度单位就可以了。

PX是什么?

物理分辨率,和屏幕尺寸没有关系,也不是视觉单位,而是可以理解为一个像素点,例如我们看到的图片是由无数像素点组成,为什么不能说是长度单位呢,这个问题很厉害,就像在在问一个点的大小???so,这是不可以的,因此只能描述有多少个点,不能说多大的点,这里其实有一种关系,就是1个PT=N个PX。

so???那么问题来了,为什么iphone 4/4s要比iphone 3GS在屏幕显示效果上面要好呢???

原因在于跟他的每一个逻辑分辨率下面包含的物理像素点个数有关系,比如说在iphone 4/4s下面的逻辑分辨率和iphone 3GS都是320X480,关键在于它们对应的物理分辨率不一样,iphone 4/4s对应的是640x960,而iphone 3Gs下面对应的只有320x480,同样的一个单位长度下,iphone 3GS比i4/4s少一半像素点,所以其Reader的@1x与@2x(一倍与二倍关系),这表示同一个pt下面包含有多少个px。

–其实就是同一个单位长度下面谁的物理像素点越多谁就越细腻越清晰。

so?那么问题又来了~Plus版本的iphone和iphone(举例iphone6/6sPlus版本比iphone6/6s版本的手机会比普通的iphone版本更清晰一些),why??

理论上iphone6/6sPlus版本的手机Reader是3倍的关系(@3x),iphone6/6s版本的手机Reader是2倍的关系(@2x),也就是说每单位pt下面iphone6/6sPlus比iphone6/6s是多出一个px像素点的。

理论虽然分析的很厉害,但是实际上来说并不会更加清晰?
理由是在这个单位的密度上面,视网膜屏所承担的个数(@2x)已经达到了人类的眼睛所能分辨出的极限了,如果再增加物理像素点的话,比如iphone6/6sPlus是3个(@3x)或者iphone1000000/1000000sPlus增加到1000000个(@1000000x)的时候,它并不会更加清楚(视网膜屏:我最多只接受两个(@2x),随便你增加,能更清晰算我输)。

小程序为什么要用iphone6的物理分辨率来做设计图?

1
2
Ip6下1px=1rpx;
Ip6 Plus下1px=0.6rpx

不是所有的单位都适合用rpx写;而是看情况的,有时候文字不需要用rpx,因为如果是小屏幕设备,等比例缩小之后会看不清

如何做不同分辨率设备的自适应?

以I6的物理分辨率750x1334为视觉稿进行设计,而在小程序中使用rpx为单位

1
Ip6下1px=1rpx=0.5pt

使用rpx,小程序会自动在不同的分辨率下进行转换,而使用px为单位不会

PPI又是什么呢??

其实与Reader是差不多的,Reader是每个pt下面包含多少个px,PPI是每一寸包含多少个物理像素点,例如iphone 3GS的屏幕尺寸是3.5寸(不是宽也不是高,而是屏幕的对角线),那PPI为啥是163呢??

其实就是勾股定理,用320x480的平方开分号再除以3.5寸,就得到了163。
DPI和PPI的概念是一样的,DPI是指打印行业里面每个单位长度下面每个打印机所能喷墨的点数,借鉴这个东西产生了PPI。

so??万剑归宗,万佛朝宗,回到问题为什么微信小程序模拟器下面iphone6的分辨率是375,而设计图一般给750???

原因是微信小程序的模拟器上给出的是逻辑分辨率(375),而不是物理分辨率,然后设计师一般给的图是根据物理分辨率来给的,所以是750px,但是小程序显示的是pt逻辑分辨率,而iphone6的Reader是二倍的关系(@2x),iphone6的pt分辨率是375x667,px分辨率是750x1334,所以如果打不过设计师的话还是得先分析一下~~~~