设备像素
设备像素（device pixels），又称为物理像素，指设备能控制显示的最小物理单位，单位(pt)
css像素
CSS像素（css pixel）:在css中以px为后缀，是一个长度单位
在css规范中，长度单位可以分为绝对单位以及相对单位
px是一个相对单位，相对的是设备像素
css像素具有两个方面的相对性：
- 在同一个设备上，每1个 CSS 像素所代表的设备像素是可以变化的（比如调整屏幕的分辨率）
- 在不同的设备之间，每1个 CSS 像素所代表的设备像素是可以变化的（比如两个不同型号的手机）
在页面进行缩放操作也会 引起css中px的变化，假设页面放大一倍，原来的 1px 的东西变成 2px，在实际宽度不变的情况下1px 变得跟原来的 2px 的长度（长宽）一样了（元素会占据更多的设备像素）
px会受到下面的因素的影响而变化：
- 每英寸像素（PPI）
- 设备像素比（DPR）
设备独立像素
设备独立像素（Device Independent Pixel）：与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素,在javaScript中可以通过window.screen.width/ window.screen.height 查看
一个设备独立像素里可能包含1个或者多个物理像素点，包含的越多则屏幕看起来越清晰
如果我们按照真实的物理像素进行布局，比如说我们按照 320 物理像素进行布局，到了 640 物理像素的手机上就会有一半的空白，为了避免这种问题，就产生了虚拟像素单位,1 个虚拟像素被换算成几个物理像素，这个数值我们称之为设备像素比(dpr)
dpr
- dpr = 设备像素/设备独立像素
- 当设备像素比为1:1时，使用1（1×1）个设备像素显示1个CSS像素
- 当设备像素比为2:1时，使用4（2×2）个设备像素显示1个CSS像素
- 当设备像素比为3:1时，使用9（3×3）个设备像素显示1个CSS像素
当dpr为3，那么1px的CSS像素宽度对应3px的物理像素的宽度，1px的CSS像素高度对应3px的物理像素高度
ppi
- ppi （pixel per inch），每英寸像素，表示每英寸所包含的像素点数目，更确切的说法应该是像素密度。数值越高，说明屏幕能以更高密度显示图像
总结
- 无缩放情况下，1个CSS像素等于1个设备独立像素
- 设备像素由屏幕生产之后就不发生改变，而设备独立像素是一个虚拟单位会发生改变
- PC端中，1个设备独立像素 = 1个设备像素 （在100%，未缩放的情况下）
- 在移动端中，标准屏幕（160ppi）下 1个设备独立像素 = 1个设备像素
- 设备像素比（dpr） = 设备像素 / 设备独立像素
- 每英寸像素（ppi），值越大，图像越清晰