当我们开始学习CSS时，我们发现CSS的测量单位分为相对和绝对两种。绝对单位植根于物理单位，如像素、厘米和英寸。但是多年来，CSS中所有的绝对单位都已经失去了与物理世界的联系，而变成了不同种类的相对单位，至少从网络的角度来看是这样。
需要注意的是，相对单位和绝对单位之间仍然存在着明显的差异。CSS的相对单位是根据父元素定义的其他样式来确定大小的，或者受父容器的大小影响。至于绝对单位，我们将深入研究，看看它们是如何被其他东西影响的，比如屏幕和设备的操作系统。
相对单位包括诸如% 、em 、rem 、视口单位（vw 和vh ）等单位。最常见的绝对单位是像素(px)。除此之外，我们还有厘米单位(cm)和英寸单位(in)。
现在，让我们来探讨一下为什么CSS的绝对单位并不那么绝对。
CSS Pixels
像素一直是CSS中最常见的单位，可以追溯到网络诞生之初。在过去的桌面屏幕世界里，在我们拥有任何智能手机之前，屏幕的像素总是等同于CSS像素。
例如，在2007年，最常见的桌面分辨率是1024×768 像素。那时，我们通常会给我们的网页一个固定的宽度，即1000 像素，以适应整个页面，而剩下的像素将被保存给浏览器的滚动条。
智能手机屏幕
智能手机带来了另一次悄然的进化，开启了高密度屏幕的时代。如果我们考虑一个iPhone 12 Pro，它的屏幕是1170 像素宽，我们会把设备上的每一个3 像素算作CSS中的1 像素。
当我们在移动领域进行尺寸测量时，我们根据CSS像素进行测量，而不是根据设备像素。总结一下：
- CSS像素是逻辑像素。
- 设备像素是真实的物理像素。
好吧，但是桌面设备呢？他们还在使用相同的老式像素计算吗？让我们来谈谈这个问题。
2021年的台式机屏幕
高密度屏幕几年后才出现在笔记本电脑上。2014年的MacBooks得到了第一批 "视网膜 "屏幕（视网膜是高密度的同义词）。
这些天，大多数笔记本电脑都有一个高密度屏幕。
让我们考虑一下MacBooks：
- 13.3英寸的MacBook Pro的屏幕宽度为
2560像素，但表现为1440像素。这意味着，每一个1.778物理像素就像1逻辑像素。 - 16英寸MacBook Pro的屏幕是
3072像素宽，但表现为1792像素。这意味着，每一个1.714物理像素就像1逻辑像素。
在PC笔记本电脑中，我测试了两个15.6英寸的屏幕，一个是全高清分辨率，另一个是4K分辨率。结果很有趣。
- 15.6英寸全高清屏幕的宽度为
1920像素，但表现为1536像素。这意味着，每一个1.25物理像素就像1逻辑像素。 - 15.6英寸的4K屏幕是
3840像素宽，但表现得像1536像素。这意味着，每一个2.5物理像素就像1逻辑像素。
正如你所看到的，真正的物理（即设备）像素和CSS（即逻辑）像素之间的联系几乎已经消失了。
这些年来，屏幕变得越来越密集了
在过去，如果你仔细观察一个屏幕，你可以真正看到它的像素。当屏幕的技术提高后，制造商开始创造更高密度的屏幕。
推荐阅读。 可折叠的网络到底意味着什么？
为什么我们对逻辑像素的计算方式不同？
多年来，随着屏幕密度的提高，我们不能仅仅因为屏幕有更多的像素而在同样的屏幕尺寸中容纳更多的内容。
想一想吧。考虑一下三星Galaxy S21 Ultra。其较窄的尺寸是1440 物理像素。我们可以很容易地把它放在一个普通的桌面屏幕上。但如果我们这样做，文字会小到无法阅读。正因为如此，我们把物理像素和逻辑像素分开。
那么，CSS中的尺寸（即宽度和高度）是按照CSS的逻辑像素来计算的。当然，我们可以使用物理像素来加载高密度的内容，比如图片和视频，就像这样：
<img src="image-size-1200px.jpg" width="300" >
好吧，CSS像素并不等同于设备的物理像素。但我们有厘米和英寸。这些是与物理世界相连的物理单位，对吗？让我们来看看它们。
CSS英寸和CSS厘米
无论我们在哪里使用英寸和厘米等物理单位，我们都知道这些是绝对单位。
我有个想法，如果CSS像素不等于设备像素，那么也许在网络上使用英寸和厘米这样的物理单位是个好主意。它们是绝对单位，对吗？
为了确定这一点，我进行了测试。我创建了一个宽度和高度为1厘米的盒子，并给它一个红色的背景颜色。我拿起一个真正的卷尺，得到了一个惊喜。
一个CSS厘米不等于一个物理厘米。
这里我在2019年中期的13英寸MacBook上用卷尺测试了一个CSS厘米单位。
对于CSS英寸来说，结果是一样的。
一个CSS英寸不等于一个物理英寸。
皮卡(pc)和毫米(mm)单位的情况也是如此。这些单位对应于CSS英寸或CSS厘米的一部分，它们都没有与真正的英寸或厘米相连。
为什么CSS英寸和厘米不是真正的英寸和厘米？
自20世纪80年代以来，PC市场将一英寸的CSS定义为相当于96 像素。这种像素的计算方法与当时微软的Windows操作系统的显示器的DPI/PPI（每英寸像素）标准直接挂钩，其中最常见的标准是96 DPI。
这意味着，1 CSS英寸将总是相当于96 CSS像素。
至于CSS厘米，每一个厘米都是由英寸直接计算出来的，这意味着1 英寸相当于2.54 厘米。这意味着，每一个1 CSS厘米将永远等于37.7952756 CSS像素。
换句话说：1cm = 37.7952756px (96px / 2.54) 。
由于CSS英寸和CSS厘米是由CSS像素直接转换而来的，而且这些年来屏幕的DPI越来越大，我们已经到了这些单位不能代表它们在屏幕上应该代表的东西的程度。
CSS点单位
点(pt)单位是CSS中不太被认可的单位之一。正如维基百科所说。
"在排版学中，点是最小的计量单位。它
被用来
测量字体大小、前导和印刷品上的其他项目。"
维基百科页面显示了一把尺子，底部是点的刻度，顶部是英寸的刻度。
在我们讨论这个单位为什么不是网络上的绝对单位之前，我们先来看看屏幕和打印机的基本单位。
PPI和DPI
我们已经提到了DPI，你可能在过去也听说过这些术语，但如果你从来没有理解过它们到底是什么，这里有一个快速的入门指南。
- PPI
屏幕是由大量的小光点组成的，称为像素。为了衡量像素的密度，我们计算适合1英寸的像素数量，称为每英寸像素（PPI）。 - DPI
打印机打印彩色的点。为了表示打印机点的密度，我们计算适合1英寸纸张的点的数量，称为每英寸的点（DPI）。
简而言之，这是两种衡量我们在1英寸内可以容纳的视觉信息密度的方法。
- PPI：每英寸像素（用于屏幕
- DPI：每英寸的点数（用于打印机
值得一提的是，1 英寸中的CSS像素和点的计数是针对宽度和高度的。这意味着，在一个96 PPI的屏幕上，一个高度和宽度为1 英寸的盒子的总尺寸为9216 像素（96×96 px =9216 px）。
下面是一个直观的演示，1 英寸，屏幕为10 PPI。
屏幕的 "DPI"
移动和桌面设备的制造商更喜欢用DPI而不是PPI来表达他们的屏幕测量。但是，不要让它迷惑你。屏幕总是用PPI，打印机则用DPI。
DPI/PPI标准
为了表示所有这些点和像素，我们有一个点(pt)单位。
但是，CSS的点单位来源于默认的打印机DPI，这也是在20世纪80年代决定的，等于72 DPI。这意味着，CSS的1 英寸总是等于72 点。
1英寸 =72点1point =1/72nd of1inch
网络的像素，打印机的点数
对于网络来说，DPI单位没有任何意义。网络DPI是根据不同的标准（96 DPI）定义的，这一点我们在计算CSS英寸和CSS厘米时已经谈过了。正因为如此，没有理由在网络上使用点的单位。
注意：1 点不等于（CSS）像素。
1点 =1.333像素72点 =1英寸72点 =96像素
打印机
在这篇文章中，我主要是想证明为什么网络上没有任何绝对单位。但是，在打印机上使用它们又是怎么回事呢？是否有理由为打印机使用CSS的英寸或厘米或点单位？
我的打印测试
我做了一个小测试，以检查20世纪80年代的DPI标准在打印机上是否正常工作。我创建了两个盒子：一个宽度和高度为72 点，另一个宽度和高度为1 英寸。
我在办公室里的一台激光打印机上打印了这两个方框。这是我用于测试打印机的点数和英寸的Codepen。
打印机能够打印更多的DPI，但如果我们在打印机上以100% 缩放，那么72 点（或1 英寸）的CSS将等于一个真正的物理英寸。
提醒一下：这篇文章更多的是关于绝对单位与网络的联系，而不是与打印机的联系。当然，在不同类型的打印机上，结果可能会发生变化。
试图在网络上创建准确的尺寸
如果我们看一下16英寸的MacBook Pro，它的物理像素与每一个1 CSS像素的比例是1.714 ，我们就无法准确预测网络上的尺寸。
如果我们试图用JavaScript的window.devicePixelRatio 来猜测16英寸MacBook Pro上的真实设备像素比例，它将返回一个错误的比例2 ，而不是1.714 。（而且这还没有考虑到网络浏览器和操作系统的缩放状态）。
为什么我们需要真正的绝对CSS单位
当我们想为一个侧边栏元素定义一个固定的尺寸时，我们会使用CSS像素。但是，如果你仔细想想，CSS像素在今天已经没有任何意义。正如我们在上面看到的，在大多数智能手机和台式机上，CSS像素已经不能描述设备像素。
基于此，我认为我们需要为CSS提供实际的物理单位（比如真正的厘米或英寸单位），因为CSS像素在网络上已经没有任何真正的意义。
值得一提的是，Firefox曾经实现了一个实际的物理毫米单位（mozmm ），但在59版中删除了它。我不知道他们为什么删除它。也许是因为有很多东西已经依赖于CSS像素了，比如响应式图像和em 和rem 单位。如果我们试图增加一个新的物理测量，也许会造成更多的问题而不是解决。
看来，网络人已经习惯了用像素来思考问题，即使CSS像素单位已经失去了与设备像素的联系，我们还是会继续使用这个单位。
如果你仍然认为CSS像素是一个很好的测量单位，请试着向一个新的网络开发者解释这个单位到底在测量什么。
目前，我们还没有任何真正的方法来描述CSS中的物理尺寸。
所以，CSS像素是最糟糕的一种绝对单位--除了所有其他单位。
总结一下
在这篇文章的开头，我说过，绝对的CSS单位已经变成了像新种类的相对单位。我们从CSS像素开始，我们看到了CSS像素和设备像素之间的区别。
然后，我们发现CSS英寸和CSS厘米是由CSS像素直接转换而来的，与真正的英寸和厘米没有关系。最后，我们谈到了点的单位，并再次谈到这个单位对于网络来说没有绝对的意义。
最后的话
这就是全部。我希望你喜欢这篇文章，并从我的经验中学习。如果你喜欢这篇文章，我希望你能听到并分享它。
