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

947 阅读4分钟

本文内容出自我的前端知识梳理 CSS中的长度单位和颜色

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

1px等于多少厘米

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

image.png

image.png

image.png

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

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

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

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

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

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

image.png

那么,屏幕分辨率又是怎么回事呢?

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

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

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

image.png

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

image.png

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

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

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

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

image.png

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

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

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

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

image.png

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

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

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

image.png

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

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

小结

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

关于图片的更多内容,可以移步这里