响应式布局基础一：px、dpi、ppi的区别

px，即pixel，像素的意思。

像素有两种，一种是物理像素，一种逻辑像素。

以前一个逻辑像素是等于一个物理像素的。当一个逻辑像素对应多个物理像素的时候，这时候，显示会更清楚。

一个逻辑像素对应多少个物理像素，这个叫做Device pixel ratio(像素设备比)

在开发过程中，css通常使用逻辑像素，也称为设备独立像素。

还有两个概念：

Dpi(dot per inch)：点/每英寸

Ppi(pixel per inch)：像素/每英寸

 

为什么使用长度单位来表达二维的量呢？

这是因为这里的英寸，代表的是对角线。

 

Dpi和ppi有什么区别呢？

有些屏幕的一个像素，需要几个点来显示。（dppx:dot per pixel，也称dpr）

例如在iPhone4设备屏幕中的物理像素数为640*960px,而CSS逻辑像素数为320*480像素。因此，使用大约4个物理像素来显示一个CSS像素。(4dppx或者说是4dpr)

在进行web设计的时候，更关注的是dpr，而不是dpi。

dpr如何查询得到呢？

通过js代码window.devicePixelRatio。

经测试，魅蓝note的dpr为3

当美工按照设备像素设计设计稿的时候，我们需要参照相关设备像素比进行换算成对应的逻辑像素（css像素）

参考资料：

知乎上：http://www.zhihu.com/question/27261444

DEV资讯：www.devstore.cn/new/newInfo/850.html

移动端适配方案一