分辨率，PPi,DPI,DPR,物理像素，逻辑像素

屏幕尺寸：指的是屏幕对角线的长度

分辨率：是指宽度上和高度上最多能显示的物理像素点个数

点距：像素与像素之间的距离，点距和屏幕尺寸决定了分辨率大小

PPI:屏幕像素密度，即每英寸(1英寸=2.54厘米)聚集的像素点个数，这里的一英寸还是对角线长度

DPI:每英寸像素点，印刷行业术语。对于电脑屏幕而言和PPI是一个意思

设备像素(又称为物理像素): 指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，和屏幕尺寸大小有关，单位 pt。

设备独立像素(也叫密度无关像素或逻辑像素)：可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，这个点是没有固定下小的，越小越清晰，然后由相关系统转换为物理像素。

css像素(也叫虚拟像素)：指的是 CSS 样式代码中使用的逻辑像素，在 CSS 规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px 是一个相对单位，相对的是设备像素(device pixel)

DPR(设备像素比)：设备像素比 = 设备像素 / 设备独立像素。(在Retina屏的iphone上，DPR为2，1个css像素相当于2个物理像素)

为什么Retina需要二倍图显示？如果设计师给你了750 1334的设计稿(主流手机分辨率)，如果是普通手机，750px的宽就是100%宽，因为他的物理分辨率和逻辑分辨率相同。而在DPR为2的屏幕上，显示的却是200%，因为浏览器认为屏幕的分辨率是375667，所有以在为移动端制作网页时，把DPR为1的"initial-scale=1.0"这样设置，把DPR为2的"initial-scale=0.5"这样设置，这样宽度750px在两种屏幕下宽度都是100%显示。所以使用二倍图才能让图片的显示效果在Retina上达到最佳。
在移动开发中，DPR是可以获取的，这样我们就可以动态改变initial-scale