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

屏幕尺寸
屏幕尺寸指屏幕对角线的长度，单位是英寸，1英寸=2.54厘米
比如常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。
如何计算手机尺寸？
知道手机屏幕的长和宽，然后利用勾股定理，就可以算出斜边的长了。

物理像素（UI设计师像素）
物理像素/屏幕分辨率/物理分辨率
屏幕分辨率是屏幕像素的数量，一般用屏幕宽度的像素点乘以屏幕高度的像素点，指的是设备屏幕实际拥有的像素点。
单位：px，即1px=1个像素点
注意：屏幕分辨率即物理像素是固定的（也就是一个设备的分辨率是固定的）

面试题： 移动端的设计图是几倍图？
苹果6开发，设计师给的图是2倍图，375逻辑像素，750物理像素

**逻辑像素/设备独立像素DIP—WEB **
也叫“设备独立像素”（Device Independent Pixel, DIP），可以理解为反映在CSS/JS代码里的像素点数。
这个是计算机坐标系统里的虚拟慨念，这个点代表一个可以由程序使用的虚拟像素(比如: css像素-----逻辑像素)

屏幕像素密度PPI
每英寸屏幕所拥有的像素数，英文简称PPI
单位dpi
这里引入最重要的一个概念：像素密度，也就是PPI（pixels per inch）。这项指标是连接数字世界与物理世界的桥梁。

设备像素比DPR
设备像素比（Device Pixel Ratio, DPR）：一个设备的物理像素与逻辑像素之比。
iPhone6—物理像素7501334，像素比DPR为2，逻辑像素375667。
物理像素与逻辑像素之间比例。当像素比为1:1时，使用1个物理像素显示1个逻辑像素；当像素比为2:1时，使用4个物理像素显示1个逻辑像素。
设备像素比（Device Pixel Ratio, DPR）：一个设备的物理像素与逻辑像素之比。

视网膜显示屏Retina
所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。由摩托罗拉公司研发。简单理解为种新型高分辨率的显示标准。
手机电脑对比图
电脑：

手机：

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

倍率与逻辑像素
苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone 6plus除外，它达到了3倍）。实际像素除以倍率，就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。

物理像素与逻辑像素
css中的1px并不等于设备的1px。
CSS中的像素只是一个抽象的单位，在不同的设备或不同的环境中，CSS中的1px所代表的设备物理像素是不同的。
实现真正的1物理像素
可以通过设置：
面试题：
在iphone6怎么实现1px：2个物理像素- - -通过transform:scale(0.5)实现

手机屏幕尺寸


rpx适配
rpx是小程序中的尺寸单位，它有以下特征：
①小程序的屏幕固定为750rpx（即750个物理像素），在所有设备上都是如此。
②1rpx=（screenWidth/750）px，其中screenWidth为手机屏幕的实际宽度（单位px）。
原理：
小程序编译后，rpx会做一次px换算，换算是以375个物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx=1px。

vw、vh适配
vw、vh是css3中的新单位，是一种视窗单位，在小程序中也同样试用
①小程序中，窗口宽度固定为100vw，将窗口宽度平均分成100份，1份是1vw。
②小程序中，窗口高度固定为100vh，将窗口高度平均分成100份，1份是1vh。
所以，在小程序中也可以使用vw、vh作为尺寸单位使用在布局中进行布局，但是一般情况下，百分比+rpx就足够使用了，所以他们的出场机会很少。

工程师尺寸就是逻辑像素，设计师尺寸就是物理像素。