css3物理与逻辑像素

移动端开发经常遇到一些概念：物理像素、逻辑像素、像素密度、像素比等，本节来详细介绍下。
屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素DIP、像素密度PPI、像素比DPR、视网膜显示屏Retina、vw、vh等。

vw、vh

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

屏幕尺寸

    屏幕尺寸指屏幕的对角线的长度，单位是英寸，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个物理像素
	注意：屏幕分辨率即物理像素是固定的，这是厂商在出厂时就设置好的，
	也就是说一个设备的分辨率是固定的

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

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

屏幕像素密度PPI

    屏幕是由很多像素点组成的。平时说的分辨率，都是手机屏幕的实际像素尺寸。
    比如480×800的屏幕，就是由800行、480列的像素点 组成的。每个点发出不同颜色的光，
    构成我们所看到的画面。
    而手机屏幕的物理尺寸，和像素尺寸是不成比例的。
    最典型的例子，iPhone 3gs的屏幕像素是320×480，
    iPhone 4s的屏幕像素是640×960。刚好两倍，然而两款手机都是3.5英寸的。
    这里引入最重要的一个概念：像素密度，也就是PPI（pixels per inch）

设备像素比DPR

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

视网膜显示屏Retina

所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，
从而达到更高的分辨率并提高屏幕显示的细腻程度。由摩托罗拉公司研发。
简单理解为种新型高分辨率的显示标准。
这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜显示屏。

物理像素与逻辑像素

在CSS中一般使用px作为单位，在Web浏览器中CSS的1个像素往往都是对应着电脑屏幕的1个物理像素，
这可能会造成一个错觉，那就是CSS中的像素就是设备的物理像素。
但实际情况却并非如此，CSS中的像素只是一个抽象的单位，在不同的设备或不同的环境中，
CSS中的1px所代表的设备物理像素是不同的。
屏幕能够显示的最小粒度是1个物理像素，iPhone4的像素比为2，
设置border-width:1px后，边框占了4个物理像素，如果能让边框的宽度为1物理像素，
那么它就比1个CSS像素要细，这可以通过设置
<meta name="viewport" content="width=device-width, initial-scale=0.5">

分辨率

首先分辨率有电脑屏幕分辨率和图像分辨率，
显示分辨率（屏幕分辨率）是屏幕图像的精密度，是指显示器所能显示的像素有多少。
由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，
同样的屏幕区域内能显示的信息也越多，所以分辨率是个非常重要的性能指标之一
。同样的，图片也是一样，分辨率最高，越是清晰。

电脑屏幕分辨率

本节总结

 工程师尺寸就是逻辑像素，设计师尺寸就是物理像素；
 vw和vh是css3中的新单位，是一种视窗单位，在小程序中也同样适用。

二倍图：1个逻辑像素等于2个物理像素