设备像素

设备像素（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），值越大，图像越清晰