像素
2023年02月27日
一、CSS 像素（CSS pixel）
css 像素: 是 web 编程的概念，它是抽象的，实际上不存在。用于逻辑上衡量像素的单位
二、设备像素（device pixels - pikesousi）（物理像素）(分辨率)
设备像素: 是屏幕显示的最小颗粒（也就是我们说的分辨率），是物理真实存在的，这是厂商在出厂时就设置好的，单位为pt
三、设备独立像素（Device Independent Pixel）
设备独立像素: 与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素,一个设备独立像素里可能包含1个或者多个物理像素点，包含的越多则屏幕看起来越清晰
3.1 获取
window.screen.width/ window.screen.height
四、设备像素比（物理像素比）（dpr（device pixel ratio））
4.1 公式
dpr = 设备像素 / 设备独立像素
4.2 获取
window.devicePixelRatio
4.3 理解
dpr=2 : 那么1px的CSS像素宽度对应2px的物理像素的宽度，1px的CSS像素高度对应2px的物理像素高度。dpr=3 : 那么1px的CSS像素宽度对应3px的物理像素的宽度，1px的CSS像素高度对应3px的物理像素高度
五、像素密度（ppi （pixel per inch））
表示每英寸所包含的像素点数目，更确切的说法应该是像素密度。数值越高，说明屏幕能以更高密度显示图像