关于css:CSS像素设备像素设备独立像素dprppi-之间的区别

69次阅读

共计 1708 个字符,预计需要花费 5 分钟才能阅读完成。

前言

大家好,我是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 的小正方块,它其实不存在具体的规范宽高,只是用于显示残缺色调的一个形象“点”,能够参考公园里景观里的变色灯带,一个彩灯由 绿三个小灯组成,混成各种色彩。

从屏幕在工厂生产出的那天起,它下面设施像素点就固定不变了,单位为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

如下图:

ppi(pixel per inch)

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

计算公式为:

总结

  1. 无缩放状况下,1px = 1dip
  2. 设施像素不会扭转,然而设施虚构像素会变
  3. 在挪动端的规范屏下,1dip = 1dp
  4. dpr = dp / dip
  5. ppi 越大,图像越清晰

正文完
 0