设备的dpr_设计师的前端知识：搞清楚像素、设备像素、设备独立像素、dpr、ppi、逻辑分辨率、物理分辨率...

布满荆棘的人生 2022-12-31 08:29 557阅读 0赞

最近工作中正在研究跨端设计系统，其中部分内容涉及到上述概念。为了搞清楚这几个术语概念自己也找了很多资料，也咨询了一些前端同学。同时也很诧异地发现有些前端同学对于以上几个概念也不完全十分清楚，所以自己把一些找到的资料汇总起来结合自己的理解尝试着解释一下这几个概念，如有不对之处，还请多多指正。

一.几个像素单位的区别

到底什么是像素：

px实际是pixel(像素)的缩写，根据 维基百科的解释，它是图像显示的基本单元，既不是一个确定的物理量，也不是一个点或者小方块，而是一个抽象概念。所以在谈论像素时一定要清楚它的上下文！

那我们通常所说的像素大概就是指这三种像素单位：1.设备像素(物理像素)；2.设备独立像素(逻辑像素)；3.css像素；我们分别来解释一下这三种像素单位，以及相互之间的关系。

1.设备像素(物理像素)

1个设备像素就代表1个真实的像素点，是设备能控制显示的最小单位，我们常说的1920×1080像素分辨率就是用的设备像素单位。

2.设备独立像素(逻辑像素)

设备独立像素(Device Independent Pixel)：与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素。

设备独立像素就是在设备像素的基础上人为定义的一层逻辑像素。举个例子，一个屏幕的物理像素是2560\*1440，但是我们可以人为定义这个屏幕就是1280\*720，所以1个设备独立像素就用4个设备像素显示。传统的pc屏幕，1个设备像素就等于1个设备独立像素；但是现在市面上有很多高清屏幕，比如苹果的retina屏幕，这是由于1个像素点用多个物理像素显示，所以高清屏的画质就更加锐利，没有颗粒感，显示效果出众。设计师出图时会有2x、3x的图，也是为了去适配高清屏幕。现在去看Macbook Pro的屏幕参数都是比较大的比如：2560 x 1600；这里的这个2560 x 1600都是物理像素，实际macbook的逻辑分辨率可能只有1440\*900。

3.css像素

css像素适用于web编程，指的是我们在样式代码中使用到的逻辑像素，是设备独立像素的一种，默认情况下 1css像素=1设备独立像素。

由于不同的物理设备的物理像素的大小是不一样的，所以这样就产生了一个问题，不同设备之间没有一个统一的单位了；css像素就是为了解决这个问题而出现的，所以要求1px在各个设备之间一定要看起来差不多大小。这里不得不赞叹一下css 像素设计的精妙之处，css为了保证1px在各个设备之上显示的实际大小是一致的，所以1px是以一个单位视角作为标准，如何确定这个单位视角的大小，即是从一臂之遥看解析度为96DPI的设备输出(即1英寸96点)时，1点(即1/96英寸)的视角。通常认为常人臂长为28英寸，所以它的视角是:

(1/96)in / (28in \* 2 \* PI / 360deg) = 0.0213度。

由于css像素是一个视角单位，所以在真正实现时，为了方便基本都是根据设备像素换算的。浏览器根据硬件设备能够直接获取css像素。

二.物理分辨率和逻辑分辨率

现在我们搞清楚了物理像素和逻辑像素，那么就应该知道物理分辨率和逻辑分辨率的含义了。我们通常说的13寸的macbook Pro分辨率是2560\*1600就是物理分辨率，实际上macbook的屏幕可能只能显示1440\*900的大小的内容，那么1440\*900就是它的逻辑分辨率。

三.dpr和ppi

1.什么是dpr(device pixels ratio)

dpr即是设备像素比(dpr 描述的是未缩放状态下，物理像素和CSS像素的初始比例关系)

设备像素比(dpr) 是指在移动开发中1个css像素占用多少设备像素，比如dpr=2就代表1个css像素用2x2个设备像素来绘制。

2.什么是ppi(pixels per inch)

ppi即每英寸像素取值，更确切的说法应该是像素密度，也就是衡量单位物理面积内拥有像素值的情况。我们知道，ppi越高，每英寸像素点越多，图像越清晰；我们可以类比物体的密度，密度越大，单位体积的质量就越大，ppi越高，单位面积的像素越多。

3.ppi和dpr的关系

dpr与ppi相关，一般是ppi/160的整数倍；通常人们在交流设备屏幕的时候通常也会告诉别人设备的ppi是多少而并非是dpr，虽然dpr更能代表一个屏幕是否是高清屏幕。