3-8 移动端分辨率精讲

2017-11-19 本文已影响82人留白_汉服vs插画

摆脱网页端思维方式，小程序虽然是web技术，但是移动端的方式。

学习要掌握原理，而不是结论，因为记结论，下一次换一个形式，又懵逼了。掌握基础原因，应对千变万化的问题。

举个栗子，在移动端开发，设计师经常给图标，2-3个尺寸的。比如原始尺寸，扩大两倍的尺寸增大三倍的尺寸。都这么用，但是为什么呢，就不知道了。

为啥iPhone 4和4s要比3和3GS要清晰一些？6plus 分辨率提升了，但是为什么没有明显比6更清晰一些？

从一张设计图的实现说起

为什么模拟器下ip6分辨率375，而设计图给750？

比如一个图片宽度为750px（为什么大多数设计都是750像素），如果在ip6中设置width：750px，只能显示一半。重点理解两个单位，pt和px。pt是逻辑单位，一个长度单位，屏幕单位。px是物理单位，不是长度相关单位。px是像素点，你能描述一个点有多大吗？所以100个像素，可能有100cm，可能有1cm宽。这里只能得到pt和px的关系，每个pt能包含几个px。

为什么4、4s和3GS的逻辑分辨率是一样的，都是320X480pt，屏幕宽都是一样，（5的宽也一样，只不过长度为568，所以屏幕尺寸大一些。），但是看着更清楚一些？实际上是物理分辨率不一样，一个是320x480 px，一个是640px X 960px。因为3GS一个pt对应一个px，4、4s一个pt对应2个px。同一个单位下面物理像素点越多，显示越细腻。

那么6plus 比6会更清晰吗？6plus 1pt对应3px，而6对应2个。每个pt下面多一个px。但实际上不会，因为6已经达到视网膜分辨率的极限。所以再增加，就不会有感觉了。ppi跟reader是一样的，reader每个pt下面有多少个px。ppi是每寸包含多少像素点。

回答上面问题，微信小程序给出来的375是逻辑分辨率，设计师给的图，通常都是物理分辨率。pt和px是2倍的关系。