CSS3---物理与逻辑像素

vw和vh是css3中的新单位，是一种视窗单位，在移动端中也同样适用。

1英寸（inch）=2.54厘米（cm）。

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

移动端的设计图是二倍图。

逻辑像素/设备独立像素，可以理解为反映在CSS/JS代码里的像素点数。

屏幕像素密度：每英寸屏幕所拥有的像素数，英文简称PPI，单位dpi
比如480×800的屏幕，就是由800行、480列的像素点 组成的。

设备像素比（Device Pixel Ratio, DPR）：一个设备的物理像素与逻辑像素之比。

iPhone6—物理像素7501334，像素比DPR为2，逻辑像素375667。

视网膜显示屏Retina：分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。

手机电脑对比图

							                                             *电脑*

手机

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

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

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

物理像素与逻辑像素 ：

（1）CSS中的1px并不等于设备的1px
（2）实现真正的1物理像素：
当viewport（谷歌翻译为：视）的属性initial-scale（谷歌翻译为：初始规模）为1时，页面大小正常，但initial-scale（谷歌翻译为：初始规模）为0.5时，页面被缩小了1倍，像素比为2:1的设备本来1个CSS像素宽度占2个物理像素宽度，缩小后的1个CSS像素宽度就只占1个物理像素，即实现了真正的1物理像素。
eg：border-width:1px并不是最小边框，浏览器可以显示的最小粒度比1px还要小。

有效可视区域/安全区

什么叫浏览器的有效可视区域呢？
通俗比如打开一个网页后，刨除浏览器的工具栏和侧边栏等，真正显示内容的地方，如下图：
1366*768

1920*1080