梳理CSS像素、设备像素、设备独立像素之间的区别

一、设备像素

设备像素也被称作为物理像素。表示显示设备的真实像素，此像素是设备的固有属性，也就是说，从出厂的那一刻，设备像素点的大小和数目已经固定，不会再发生改变。

分辨率1080*1920的手机

英寸是英式的长度单位,寸是中国的长度单位。1英寸 = 2.54 厘米、1寸 = 3.33333333 厘米、 1英寸 = 0.762 寸

1、分辨率
通常使用分辨率来描述设备像素，例如1920*1080，表示设备横向有1920像素点，纵向有1080个像素点。

2、屏幕尺寸
购买电视或者手机等设备的显示器都有一个屏幕尺寸参数，比如55英寸，它既不是显示器的宽度也不是高度，而是对角线的长度，如上图所示。

3、屏幕像素密度（PPI）
屏幕像素密度PPI（Pixel Per Inch，简称 PPI），单位是 dpi（Dot Per Inch）。
理论上，PPI越高越好，图像会更加细腻清晰。
以上图设备为例，计算该手机的PPI如下。
首先，算出对角线的尺寸：

然后，根据计算公式算出PPI：
PPI = 对角线的分辨率 / 对角线尺寸，即 PPI = 2203px / 5inch ≈ 440dpi，所以该手机的屏幕像素密度是440dpi。

二、设备独立像素

随着技术的进步，很小的屏幕能容纳很高的物理像素，比如 1920 * 1080以前只能应用于大的显示器，现在可能被容纳于一个小尺寸的移动端设备中。

iPhone 3和iPhone 4，屏幕尺寸一样，它们的设备独立像素都是320 * 480，但后者的屏幕像素密度是前者的两倍，iPhone 3物理像素是320 * 480，iPhone 4的物理像素是640 * 960。
如果使用设备像素作为单位，那么在视觉上看的话，iPhone 4上的div宽度是iPhone 3的一半，所以使用物理像素在web中设置尺寸是不合理的。
因此操作系统定义设备独立像素，用设备独立像素定义的尺寸，不管屏幕的参数如何，都能以合适的大小显示。

这就说明：
iPhone3用 1个 物理像素表示 1个 设备独立像素
iPhone4用 4个 物理像素表示 1个 设备独立像素
（注：横向2个物理像素表示1个设备独立像素，纵向2个物理像素表示一个设备独立像素）
而这一切都是由操作系统控制。

获取设备独立像素

三、CSS像素

在web中所设置的像素都是CSS像素。

设备独立像素也是可以设置的，但是一般不去设置它。所以在没有缩放、同时设备独立像素未被设置的情况下，1个CSS像素等同于1个设备独立像素。

设备独立像素=CSS像素、未缩放

CSS像素在视觉上是很容易改变大小的，比如缩放浏览器页面，就是改变的CSS像素，当放大一倍，那么一个CSS像素在横向或者纵向上会覆盖两个设备独立像素。
例如：宽度100px的div，当页面放大一倍，它会在横向上由原本占据100个设备独立像素，变成占据200个设备独立像素；如果缩小，则恰好相反，只能占据50个设备独立像素。

设备像素(深蓝色背景)、CSS像素(半透明背景)

1、左图表示当用户进行缩小操作时，一个设备像素覆盖了多个CSS像素。
2、右图表示当用户进行放大操作时，一个CSS像素覆盖了多个设备像素。

无论CSS像素是缩小还是放大，它的像素数目是不变的。
比如100px，无论缩放，它依然是100px，只不过它占据的设备独立像素发生了变化（体积发生了变化，视觉大小上发生了变化而已）。