likes
comments
collection
share

CSS像素、设备像素、设备独立像素、dpr、ppi 之间的区别

作者站长头像
站长
· 阅读数 265

前言

大家好,我是HoMeTown,顺着计量单位,想继续聊一下CSS像素、设备像素、设备独立像素、dpr、ppi 之间的区别。

众所周知,在CSS中我们通常是使用px作为单位的场景多一点,在PC端,1个像素恰好对应电脑屏幕上的1个物理像素点,正因如此,会给刚开始了解CSS的同学一个错觉就是:css中的像素就是设备的物理像素

其实不然,css中的像素只是一个抽象的单位,在不同的设备与环境中,css中的1px所代表的设备物理像素是不同的,以移动端为🌰,在做移动端开发时,就会出现1px的问题,在不同机型的移动设备上,显示的效果却又很大的差异。这就涉及到设备像素css像素设备独立像素dprppi的概念。

css像素

css像素就是我们在进行开发时,经常使用的px单位。px本身从主观的意义来讲,其实应该是一个绝对单位,但是从客观的角度出发,在不同的机型下,他又相对于设备像素,主要体现在两个方面:

  • 调整屏幕分辨率
  • 两个不同型号的手机

在页面进行缩放的操作,其实也会引起css中px的变化,举个🌰:

有一个元素320px,正好填满整个屏幕,把页面放大1倍后,原本1px的元素变成2px,在实际宽度不变的情况下,1px变得跟原来的2px一样了,之前需要320px才能填满,现在只需要160px,此时元素会占据更多的设备像素。

由此可见,px会受到dpr(设备像素比)ppi(每英寸像素比)的影响。

设备像素(device pixels)

设备像素也就是物理像素,即设备控制显示的最新物理单位,不一定是一个1x1 或者 2x2的小正方块,它其实不存在具体的标准宽高,只是用于显示完整色彩的一个抽象“点”,可以参考公园里景观里的变色灯带,一个彩灯由绿三个小灯组成,混成各种颜色。

CSS像素、设备像素、设备独立像素、dpr、ppi 之间的区别

从屏幕在工厂生产出的那天起,它上面设备像素点就固定不变了,单位为pt

设备独立像素(Device Independent Pixel)

设备独立像素与就是,与设备无关的逻辑像素,代表可以通过程序控制使用的虚拟像素,是一个总的概念,包括了css像素。

JavaScript中可以通过window.screen.width/window.screen.height查看。

举个简单的🌰:我有一台辣鸡笔记本,我想玩给他爱,然后电脑的分辨率为2560x1600,可能我觉得这个分辨率对我来说不太舒服,我再 设置--影响--图形--分辨率 中把它调到1440x900

这里的分辨率其实不严谨的讲,就指的是设备独立像素,一个设备独立像素里可能会包含1个或者多个物理像素点,包含的越多,画质越高。

为什么会出现设备独立像素这种虚拟像素单位概念呢?举个🌰:

假设,我有一个iPhone12 和 iPhone13,尺寸都是5.4,iphone12的分辨率是1040*960, iphone13的分辨率是2080×1170,那么,ihpone12有1170个物理像素,iphone有2532个物理像素。

如果按照真实物理像素进行布局,以12为例,那么到13上,又会出现一半的空白,为了避免这种情况的出现,出现了虚拟像素单位,我们统一12和13的虚拟像素都是1040个,只是在12上,1个虚拟像素被换算成1个物理像素,在13上,1个虚拟像素,被换算成2个物理像素。

这种n个虚拟像素:n个物理像素比例式的换算,被统称为设备像素比,也就是dpr

dpr(Device pixel ratio)

设备像素比,代表设备独立像素到设备像素的转换关系。

JavaScript中可以通过window.devicePixelRatio获取。

计算公式为:

drp = dp / dip
if(drp === 1:1) use 1dp show 1px
if(drp === 2:1) use 4dp show 1px
if(drp === 3:1) use 9dp show 1px

如下图:

CSS像素、设备像素、设备独立像素、dpr、ppi 之间的区别

ppi(pixel per inch)

每英寸像素,即每英寸所包含的像素点数目,也就是像素密度,数值越高,屏幕越能以更高的密度显示图像。

计算公式为:

CSS像素、设备像素、设备独立像素、dpr、ppi 之间的区别

总结

  1. 无缩放情况下,1px = 1dip
  2. 设备像素不会改变,但是设备虚拟像素会变
  3. 在移动端的标准屏下,1dip = 1dp
  4. dpr = dp / dip
  5. ppi越大,图像越清晰