为了彻底弄懂CSS中的1px究竟有多长，我翻出了家里的卷尺

CSS是描述HTML文档如何显示的，在显示的过程中，HTML元素的长宽、间距、字体大小等等，都需要通过长度尺寸单位来表示。我们常常会说：字体大小16像素，间距10个像素。这里的像素，就是CSS中的长度尺寸单位。一个像素写作1px，那么1px在屏幕中到底占用了多少的空间呢？

1px等于多少厘米

我们先来看一个实测。我写了一个很简单的网页，网页中有一个HTML元素:width: 300px，将这个网页在不同的显示器下全屏，然后用尺子量了一下（mac上的尺子工具要花钱，所以就人工量了）。

注意：上述图片由于拍摄角度问题，存在些许误差。

1cm大家都知道有多大。并且不管在哪儿显示，1cm就是1cm。厘米可以说是一种绝对单位。但是300px在不同的屏幕上，显示的长度却是不一样的。CSS中的像素px, 其实是一种逻辑单位。

绝对长度单位、屏幕尺寸以及屏幕分辨率

要彻底理解CSS中的像素px，先从身边的事物开始讲起。

比如，我们经常会听到，iphone14的屏幕尺寸就是6.1英寸。英寸是英国那边的长度单位。1英寸 = 2.54厘米。也就是说，iphone14的屏幕尺寸是： 6.1 * 2.54 = 15.494厘米。像厘米，英寸这样的长度单位，叫做绝对长度单位。

屏幕尺寸是如何计算的呢？其实是计算的屏幕对角线的长度。

那么，屏幕分辨率又是怎么回事呢？

屏幕分辨率：指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素来表示屏幕的分辨率，如1960*1080。

注意：这里的像素px 与 CSS中的像素px ，不一定相等。

像素点其实就是一个一个的小方块，是屏幕展示画面的最小单位。下面这张图，可以比较形象的表示像素点：

iphone14的像素为：2532px * 1170px。其对角线的像素点个数为：

每英寸内包含的像素点个数为：2789 ➗ 6.1 ≈ 460;

这里的每英寸内包含的像素点个数被称为屏幕像素密度(pixels per inch)，简写为：ppi。在计算机屏幕上，ppi 经常也被称为：dpi(dots per inch).

ppi越高，我们通过屏幕肉眼可见的画面就越清晰。

Chrome针对不同的ppi，对显示屏幕进行了分类,

Apple直接将屏幕分为了非高清屏、高清屏、超高清屏。我们平时所说的2k屏，4k屏，就是分辨率达到了特定值的屏幕。

设备像素比(DPR)与CSS中的px

在web开发中，有一个设备像素比(devicePixelRatio)的概念，简称为：DPR。在浏览器中（主要是移动端），可以通过window.devicePixelRatio来获取这个值。这个值是像素大小的比率：一个 CSS 像素的大小与一个物理像素的大小的比。简单来说，它告诉浏览器应使用多少屏幕实际像素来绘制单个 CSS 像素。CSS像素是一个逻辑上的概念。

桌面端电脑的DPR值，是可以自定义的。window.devicePixelRatio并不能获取准确的DPR值。 Windows电脑的DPR值，可以通过修改屏幕分辨率设置，一般情况下为1。 MAC OS的DPR值，可以通过系统的显示器设置查看。

假设在dpr=2的情况下，我们在CSS中的1px，在屏幕上，就需要用2个物理像素来表示。结合之前的内容,

∵ ppi = 每英寸内包含的像素点个数
∴ 一个物理像素实际宽度 = 1 / ppi。
∴ 300px宽的HTML元素实际的宽 = 一个物理像素实际宽度 * 300 * DPR = 1 / ppi * 300 * DPR

下面，我们来试着回答一开始的问题，1px到底等于多少厘米。下图列出了我电脑的配置以及计算过程：

可以看到，计算出来的过程与上面用卷尺量出来的长度是相符合的。

CSS中除了px可以表示长度以外，还有em, rem等。而移动端中的尺寸计算，还涉及到一个重要的概念：viewpoint。这些将在以后的内容中详细介绍。

小结

我们生活中提到的像素与web开发中的提到的像素是不同的。CSS中的1px最终表现出来，到底有多大的尺寸，取决于屏幕本身的分辨率和屏幕的分辨率设置。除了屏幕，我们平时也会说一个图片的大小是m像素 * n像素，这是逻辑像素。而图片的真实尺寸，是等于图片像素值 / 图片的dpi。

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享