15-移动端布局基础——DPI、PPI、物理像素、DPR、viewportcss像素、DPR

1. DPI 和 PPI 是什么？

DPI ---- 最初用于衡量打印物上每英寸的点数密度，就是表示你的打印机可以在一英寸内打印多少个点。DPI值越小，打印的内容越不清晰。

当DPI的概念迁移到计算机屏幕上的时候，就应该称之为PPI 。同理：PPI就是表示计算机屏幕上每英寸可以显示的像素点的数量。

一、物理像素和css像素

1、物理像素
显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了。

2、css像素
设备的独立像素，也就是我们在css布局时的像素，逻辑像素与之间存在一个比例关系，默认情况下一个px和一个像素一一对应，是相同的。

可以在浏览器中打开F12控制台查看对应设备的css像素值：

三、设备像素比DPR

DPR = 物理像素(设备像素) / 独立像素(CSS像素)

当像素比为1:1时，使用1个物理像素显示1个CSS像素；当像素比为2:1时，使用4个物理像素显示1个CSS像素；当像素比为3:1时，使用9（33）个设备像素显示1个CSS像素。

例如：
iphone6 1css像素===2物理像素

iphone s5 1css像素