微信小程序（布局适配与物理逻辑像素）

移动端开发经常遇到一些概念：物理像素、逻辑像素、像素密度、像素比等
关键词：屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素DIP、像素密度PPI、像素比DPR、视网膜显示屏Retina、rpx、vw、vh等。

单位是英寸，1英寸=2.54厘米
比如常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等
逻辑像素/设备独立像素DIP—WEB
逻辑像素/设备独立像素
也叫“设备独立像素”（Device Independent Pixel, DIP），可以理解为反映在CSS/JS代码里的像素点数。
这个是计算机坐标系统里的虚拟慨念，这个点代表一个可以由程序使用的虚拟像素(比如: css像素-----逻辑像素)
视网膜显示屏Retina
Retina：

viewport:
viewport（谷歌翻译为：视）中的一个小方格，CSS样式代码中使用的是逻辑像素。如果在一个设备中，物理像素与逻辑像素相等，将不会产生任何问题。但是，在iphone 4中，物理像素是640px960px，而逻辑像素数为320480px。因此，需要使用大约4个物理像素来显示一个CSS像素。
也就是说我们经常说的工程师尺寸就是逻辑像素，设计师尺寸就是物理像素。
倍率与逻辑像素

Retina屏幕把2×2个像素当1个像素使用。

比如原本44像素点高的顶部导航栏，在Retina屏上用了88个像素点的高度来显示。导致界面元素都变成2倍大小，效果和3gs一样，但画质却更清晰了。

苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone 6plus除外，它达到了3倍）。实际像素除以倍率，就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。
物理像素与逻辑像素
CSS中的1px并不等于设备的1px
eg：border-width:1px并不是最小边框，浏览器可以显示的最小粒度比1px还要小。为什么会出现比border-width:1px更细的边框？
实现真正的1物理像素
屏幕能够显示的最小粒度是1个物理像素，iPhone4的像素比为2，设置border-width:1px后，边框占了4个物理像素，如果能让边框的宽度为1物理像素，那么它就比1个CSS像素要细，这可以通过设置

1px边框问题

用CSS3的transform: scale，因为简单直接、适用性和兼容性好。即transform: scale(0.5)
rpx适配
rpx是小程序中的尺寸单位，它有以下特征：
①小程序的屏幕宽固定为750rpx（即750个物理像素），在所有设备上都是如此
②1rpx=（screenWidth / 750）px，其中screenWidth为手机屏幕的实际的宽度（单位px），例如iphone6的screenWidth=375px，则在iphone6中1rpx=0.5px
WXSS尺寸单位
原理:
小程序编译后，rpx会做一次px换算。换算是以375个物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px。

vw、vh适配
vw和vh是css3中的新单位，是一种视窗单位，在小程序中也同样适用。
①小程序中，窗口宽度固定为100vw，将窗口宽度平均分成100份，1份是1vw
②小程序中，窗口高度固定为100vh ，将窗口高度平均分成100份，1份是1vh
小结
工程师尺寸就是逻辑像素，设计师尺寸就是物理像素；
vw和vh是css3中的新单位，是一种视窗单位，在小程序中也同样适用。但是一般情况下，百分比+rpx就已经足够使用了,所以出场机会很少
二倍图：1个逻辑像素等于2个物理像素