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

一、屏幕尺寸

屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。

常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。

如何计算手机尺寸？
第一种：量出手机屏幕的长和宽，在利用勾股定理，就可以算出斜边的长。
第二种：用尺子量一下它的对角线是多少厘米，然后再换算成英寸就搞定了。

手机屏幕尺寸：

二、物理像素–UI设计师像素（物理像素/屏幕分辨率/物理分辨率）

屏幕分辨率：是屏幕像素的数量。

（用屏幕宽度的像素点*屏幕高度的像素点=设备屏幕实际拥有的像素点）

单位：px，即1px=1个像素点

例如： iPhone 6的屏幕在宽度方向有750个像素点，高度方向有1334个像素点，所以iPhone 6 总共有750px*1334px个物理像素。

注意★★★★：屏幕分辨率即物理像素是固定的，这是厂商在出厂时就设置好的，也就是说一个设备的分辨率是固定的。

面试题：

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

三、逻辑像素/设备独立像素DIP—WEB

DIP（缩写）-------Device Independent Pixel（全称）

可以理解为反映在CSS/JS代码里的像素点数

这个是计算机坐标系统里的虚拟慨念，这个点代表一个可以由程序使用的虚拟像素(比如: css像素-----逻辑像素)。

四、屏幕像素密度PPI

屏幕像素密度：每英寸屏幕所拥有的像素数，英文简称PPI。
单位：dpi。

例如： 手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320×480，iPhone 4s的屏幕像素是640×960。刚好两倍，然而两款手机都是3.5英寸的。

解析：
所以，这里引入最重要的一个概念：像素密度，也就是PPI（pixels per inch）。这项指标是连接数字世界与物理世界的桥梁。

Pixels per inch，准确的说是每英寸的长度上排列的像素点数量。

1英寸是一个固定长度，等于2.54厘米，大约是食指最末端那根指节的长度。像素密度越高，代表屏幕显示效果越精细。Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。

五、设备像素比DPR

DPR（缩写）--------Device Pixel Ratio（全称）

一个设备的物理像素与逻辑像素的比
例如：iPhone6—物理像素7501334，像素比DPR为2，逻辑像素375667

当像素比为1:1时，使用1个物理像素显示1个逻辑像素；当像素比为2:1时，使用4个物理像素显示1个逻辑像素。

六、视网膜显示屏Retina

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

在Retina屏上，DPR不再是1，而是大于1
比如2（iPhone 5 6 7 8）
或者3（iPhone 6 Plus等一系列Plus）

七、viewport

viewport（谷歌翻译为：视）中的一个小方格，CSS样式代码中使用的是逻辑像素。

八、倍率与逻辑像素

苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone 6plus除外，它达到了3倍）。实际像素除以倍率，就得到逻辑像素尺寸

九、物理像素与逻辑像素

CSS中的1px并不等于设备的1px

1个CSS像素是等于4个物理像素

实现真正的1物理像素：

当viewport（谷歌翻译为：视）的属性initial-scale（谷歌翻译为：初始规模）为1时，页面大小正常，但initial-scale（谷歌翻译为：初始规模）为0.5时，页面被缩小了1倍，像素比为2:1的设备本来1个CSS像素宽度占2个物理像素宽度，缩小后的1个CSS像素宽度就只占1个物理像素，即实现了真正的1物理像素。
面试：iphone6—1px:2个物理像素----transform:scale(0.5)。

border-width:1px并不是最小边框，浏览器可以显示的最小粒度比1px还要小。

实现真正的1物理像素：

屏幕能够显示的最小粒度是1个物理像素，iPhone4的像素比为2，设置border-width:1px后，边框占了4个物理像素。

如果能让边框的宽度为1物理像素，那么它就比1个CSS像素要细，这可以通过设置

<meta name="viewport" content="width=device-width, initial-scale=0.5">

案例1：

iPhone 6的物理像素上面已经说了，是750*1334，那它的逻辑像素呢？
只需在iPhone 6的Safari里打印一下screen.width和screen.height就知道了，结果是 375*667，这就是它的逻辑像素，据此很容易计算出DRP为2。
还可以直接通过window.devicePixelRatio这个值来获取DRP，打印结果是2，符合我们的预期。

想画个1px的下边框，没法像安卓或iOS的同时那样直接操纵物理像素点ui,这就是初级前端面试必考题之“1px边框问题”的由来

最推崇的方法还是利用CSS3的transform: scale，因为简单直接、适用性和兼容性好。即transform: scale(0.5)

十、rpx适配（小程序中的尺寸单位）

特征：
（1）小程序的屏幕宽固定为750rpx（即750个物理像素），在所有设备上都是如此。

（2）1rpx=（screenWidth / 750）px，其中screenWidth为手机屏幕的实际的宽度（单位px），例如iphone6的screenWidth=375px，则在iphone6中1rpx=0.5px。

在不同设备上rpx与px的转换是不相同的，但是宽度的rpx却是固定的，所以可以使用rpx作为单位，来设置布局的宽高。

十一、WXSS尺寸单位

小程序编译后，rpx会做一次px换算。换算是以375个物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px

十二、vw、vh适配

vw和vh是css3中的新单位，是一种视窗单位，在小程序中也同样适用。
①小程序中，窗口宽度固定为100vw，将窗口宽度平均分成100份，1份是1vw
②小程序中，窗口高度固定为100vh ，将窗口高度平均分成100份，1份是1vh

十三、物理像素与逻辑像素小结

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

（3）小程序编译后，rpx会做一次px换算。
（4）二倍图：1个逻辑像素等于2个物理像素
（5）vw和vh是css3中的新单位，是一种视窗单位，在小程序中也同样适用。但是一般情况下，百分比+rpx就已经足够使用了,所以出场机会很少