CSS 中的像素(px)

CSS 中的像素(px)

px 是一个我们经常在开发中使用的一个单元;
它表示在屏幕上展示的最小单元;

但是, 在 CSS 中像素可能和我们想象的不太一样.

CSS 中的 px 是逻辑距离还是物理距离

答: 是逻辑距离;

像素(pixel)在浏览器中是一个表示距离的绝对单位(absolute unit);
同时, 在 CSS 中它是一个相对像素 (reference pixel);

浏览器会根据设备像素比(devicePixelRatio), 来展示图像;
所以, 在 CSS 中 1px 可不一定对应真实在显示器上的 1px 哦!

例如: 在我屏幕分辨率是 2560 * 1600的 13 寸笔记本上;
网页展示的文本是 16px, 但是实际上物理上却是 32px;

可以看到, 浏览器中可用的宽高和实际的分辨率并不一致

其中有一个计算公式:

CSS Pixel = Device Pixels / Device Pixel Ratio

为什么要使用逻辑像素

答：适配不同的设备，让他们看起来更有一致性；

为什么要使用 2 倍图

因