如何秒懂 - 物理像素、CSS 像素、CSS 参考像素、设备独立像素？

本文意在用最短的话，讲清楚这几种像素之间的区别和联系。

文章不是太深，因此对于还不能很好地区分这几种像素的同学来说是非常友好的，如果本文对你有帮助，还请多多点赞收藏哈~

---

1. 物理像素（device pixels）

又叫设备像素。一组三原色组成的一块区域为一个物理像素。

对于一个款型的设备来说，物理像素的大小是固定的，在设备的设计之初就已经被确定好了。

上图放大的这一块区域，我们可以看到有很多重复的单元，每个单元均由红、绿、蓝三原色组成。我们称：一组三原色组成的一块区域为一个物理像素。不同类型的设备，三原色的形状和布局会存在一定的差异。并且，不同款型的设备之间，物理像素的大小也会有区别。

我们可以用“点距”来描述一个物理像素块的宽度。就液晶显示器来说，液晶显示器的点距通常在 0.25mm ~ 0.29mm 之间。

2. 像素密度（PPI） 

pixels per inch，简称PPI，它表示每英寸有多少个设备像素。

像素密度为 96PPI，就表示每英寸有96个设备像素。对于液晶显示器来说，就是每英寸有多少个物理像素。

同时，还有一个单位叫 DPI。和 PPI 很相似，不过它用来特指一些高分辨率设备，例如打印机，它的每个墨点通常比像素点还要小，所以分辨率通常比一些显示器更高。96DPI 就表示每英寸有96个点，可不一定是墨点哦。

3. CSS 参考像素

简称：参考像素。参考像素是指观看一个设备像素时，对应的视角角度（大约为 0.0213 度），但通常都用来指代典型视距下，0.0213 度视角看到的像素大小。

从一臂远（成人的手臂大约是28英寸）的距离看解析度为 96DPI 的设备，1个设备像素所对应的视角，这个角就是 CSS 参考像素。CSS 参考像素其实是一个角。

不同款型的设备，典型观看距离越远时，参考像素就越大（注意这里的大，不是指视角变大，而是角度对应在屏幕上的尺寸变大，我们通常说的CSS参考像素，更多都是指代这个屏幕上的尺寸）。

对于某一款设备来说，设计完成时，它的典型视距就已经确定了，那么这个参考像素也就确定了。

4. CSS 像素

CSS像素是这样定义的：

• 对于低分辨率的设备来说，它等于最接近参考像素的整数个物理像素所对应的大小，
• 而对于高分辨率的设备来说，它的大小就是  英寸。

这样来定义，就可以包罗上述各种形状的物理像素了。

例如：对于一款显示器来说，参考像素的大小是确定的，假定是 0.26mm，这款设备的每个物理像素的大小是 0.28mm，那么，对于这款设备来说，一个物理像素就是最接近一个参考像素的。所以，此时一个CSS像素的大小也就是一个物理像素的大小。

因此，就多数液晶显示器来说，在100%缩放级别下，一个 CSS 像素的大小就等于一个物理像素的大小。

CSS 像素的大小是可变的。“一个 CSS 像素的大小就等于一个物理像素的大小”是一款设备的默认 CSS 像素尺寸。我们按住" Ctrl "和" + "，将网页进行放大，CSS 像素也随之变大，此时一个CSS 像素中可能包括多个物理像素；

反之，当我们缩小网页时，就表现为多个 CSS 像素填充在了一个物理像素中。

我们将128px 的元素缩放级别调整为 200%，元素宽、高确实都是原来的两倍大小，但是元素此时仍为 128px，这是为什么呢？

因为我们改变的是每个 CSS 像素的大小，并没有让 CSS 像素数目增多。外观上，被放大的 128*128px 的 CSS 像素占据着 256*256px 设备像素的物理空间，但是宽度仍然是 128px，只是现在的 CSS 像素面积变为了原来面积的四倍。

5. 分辨率

分辨率有物理分辨率、显示分辨率（也叫像素分辨率）、逻辑分辨率三种。

• 物理分辨率是水平与竖直物理像素个数的乘积，
• 而显示（像素）分辨率则是水平与竖直 CSS 像素个数的乘积，
• 逻辑分辨率表示水平与竖直点数的乘积。（下文会细讲“点”这一概念）

我们平常所说的显示器分辨率，一般指桌面设定的显示分辨率，而不是物理分辨率。

现在液晶显示器成为主流，它只有在二者相等时显示效果最佳，所以现在我们的桌面分辨率几乎总是与显示器的物理分辨率一致了。一台物理分辨率为1280×1024 的液晶显示器，在默认情况下，桌面显示的分辨率也是1280×1024px，这个时候是最清晰的；我们可以设定桌面显示分辨率为 800×600px，非原始分辨率必须通过在液晶显示屏上拟合重新取样来实现，要使用插值算法，这种情况下可能会让显示屏看起来破碎或模糊；物理分辨率为 1280×1024 液晶显示器可能无法完全显示 1600×1200px 的分辨率，因为物理三元素组不够。

对于手机来说，分辨率通常也是指显示分辨率。

6. 设备独立像素

又叫逻辑像素、独立像素。

对于某一个设备来说，缩放级别为100%时，一个 CSS 像素和一个设备独立像素的大小相同。

7. 设备像素比（DPR）

device pixels ratio，简称 DPR，它是物理像素宽度与 CSS 像素宽度的比值。

iPhone 的 Retina 视网膜屏 DPR = 2，就表示一个 CSS 像素的宽度等于两个物理像素的宽度。那么一个 CSS 像素就占据着四个物理像素的空间。因此，iPhone5 的物理像素数为 640 * 1136px，而CSS逻辑像素数却仅为 320 * 568px。iPhone3 与 iPhone4 的 CSS 像素数目相同，显示分辨率均为 320 * 480px，但是二者的物理像素却差了四倍。iPhone3 的物理分辨率为320 * 480px，而拥有 Retina 视网膜屏的 iPhone4 的物理分辨率却有 640 * 960px。

8. @2x、@3x图

说到这，必须要引出一个概念，由苹果公司提出的“点”。一个点的大小大概是0.183mm*0.237mm，这个点的大小是在不同的设备之间差别很小，长、宽的差别都在0.05mm之内。也就是200差了5，大致可以忽略这一差异。我们把“点”看作联系不同像素密度图片的一个桥梁。一起看下面的图，三张图片，物理尺寸是一样的，但是像素密度却不一样。下图一个红色的小方块就是一个点，一个蓝色小方块就是一个像素点。我们可以看到，@1x图一个点就对应一个像素点，@2x图一个点包含4个像素点，而@3x图一个点包含了9个像素点。当我们用更多的像素点去描述一个点时，自然这个点想表述的图像就会更清晰。

看完上面这张图片，我想大家就已经明白@1x、@2x、@3x图之间的区别了。其实就是通过改变CSS像素的大小，在不改变图片的物理尺寸的前提下，集中更多的CSS像素来描述这一张图片。当然是CSS像素块越多，这个图像就越清晰。

iPhone的CSS像素大小等于物理设备像素。

补充：

• 在低分辨率设备中，pt,cm,in等单位的大小不等于它的物理大小，它们的大小需要 px（这时等于 xx 个设备像素）来进行转换，如1in 此时等于96个设备像素的大小(即 96px)。
• 在高分辨率设备中，1px 也不等于 xx 个设备像素，px 的大小就等于固定值。

文章有什么错误欢迎指明，定立即更正。

---

参考文章：

简书_css像素—初探

A tale of two viewports

CSDN_CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport

知乎_你真的了解css像素嘛