作为前端需要知道的逻辑像素、设备像素、dpr、dpi…

作为前端开发者，我们经常需要面对各种不同的屏幕，如 PC、iPad、移动端等。这些屏幕的尺寸和分辨率各不相同，因此我们在 CSS 中设置的相同像素单位（px）在不同屏幕上的显示效果也会有所差异。如果你想深入了解其中的原因，那么就跟着本文一起探究一下像素的奥秘吧。

设备像素

首先我们需要知道什么是设备像素?

设备像素，也称为物理像素，是指屏幕上的实际像素。我们都知道，屏幕是由许多小方块组成的，每个小方块只能显示一种颜色，而这 1 个小方块就是 1 个设备像素。每个设备的设备像素大小都不同，而且它们在出厂时就已经确定了每个设备像素的大小。这就是设备像素的概念。

逻辑像素

逻辑像素也被称为设备独立像素（Device Independent Pixel，DIP），它是一个在编程和设计领域中使用的抽象概念。与设备屏幕无关，逻辑像素是通过程序控制使用的虚拟像素。例如，在 CSS 中，我们通常使用px作为单位来设置元素的宽高和位置。在大多数情况下，你可以将 CSS 像素看作是逻辑像素。

一个逻辑像素可以包含一个或多个设备像素,比如 CSS 中长宽为(2px*2px)的元素中可能包含了(2*2)*(2*2)16 个设备像素点,这里也就涉及到了我们接下来要说的 DPR(devicePixelRatio)

DPR(设备像素比)

先说下结论:DPR 是指设备像素和逻辑像素比值

在 iphone4 没出来之前,1 个设备像素代表的其实就是 1 个逻辑像素。2010 年苹果公司 iPhone 4 发布会上首次推出 Retina 屏,Retina 屏是通过在有限的屏幕空间内增加更多的像素来实现的的高分辨率屏幕,大大提高了用户体验。举个简单例子,如下图

作为前端需要知道的逻辑像素、设备像素、dpr、dpi... — image.png

设备分辨率从4*4提高到了8*8,但尺寸却没有变化,因此它的 DPR 是 8/4=2。

这里有小伙伴会问为什么不是 8*8/4*4=4?

其实 DPR 计算的是物理像素宽或高增加的倍数,因为宽增加一倍高一定也会增加一倍,不然一个像素点的宽和高不就不一致了吗(世界上的屏幕每个像素点几乎都是正方形)。

浏览器中我们可以使用window.devicePixelRatio来查看dpr的

比如我的台式电脑的dpr是1，也就意味着逻辑像素和设备像素是一致的。但是我们可以通过缩放浏览器来改变这个dpr。比如我们将其放大到200%，它的dpr就变成了2，也就是说css像素中1*1中的所占的设备像素从1*1变成了2*2，因此我们看到了页面就增大了一倍。

因为DPR的原因所以就有了我们常说的1px边框的问题，大家是不是在面试中经常被问到？下面我们就来简单说一下这个问题

1px边框问题

在我们前端开发的时候，通常需要UI给我们一个设计图，比如移动端常见的就是给我们一个750*1136大小的设计图并标上一些元素的尺寸，因为iPhone6的分辨率就是750*1136。而iPhone6的dpr是2，所以它的逻辑像素其实是375*667,这里在浏览器模拟手机端也可以看到

因此在我们写css像素单位px的时候就需要将设计图上的值除以2来得到实际的css像素。但是问题就出现了，如果设计图上的边框是1px，那么实际需要的css边框就是0.5px，但是现在很多浏览器对边框0.5px显示方式是不一样的，有的甚至直接不显示边框。所以就需要聪明的前端们自己解决了，解决方式有很多，这里简单说一下