摆脱网页端思维方式，小程序虽然是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倍的关系。
所以说，6的屏幕是375pt的，对应的原始图片应该是750px
如何适配不同机型？
微信小程序-尺寸单位rpx
rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。
设备屏幕尺寸分辨率(PT)Reader分辨率(px)渲染后PPI(DPI)
pt:逻辑分辨率； pt的大小与屏幕的尺寸有关系，简单可以理解为长度和视觉单位
px指物理分辨率,和屏幕尺寸没关系
pt和px关系
1个pt可以有1个px构成，也可以有2个px,还可以有3个甚至更多
iphone6是由2个px构成的
如何做不同分辨率设备的自适应
以iphone6的物理像素750*1334为视觉稿进行设计，而在小程序中使用rpx为单位
iphone6下 1px = 1rpx = 0.5pt
使用rpx小程序会在不同分辨率的设备下自动进行转换，而px不会
建议设计团队按iphone6来做设计图,因为
Iphone6 1px=1rpx
Iphone6 plus 1px=0.6rpx
Iphone6换算比较方便。
不是所有的单位都适合rpx，字体不适合rpx,会导致不同设备看不清
网友评论