设备像素
设备像素(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),值越大,图像越清晰