px，魔法单位 | CSS

1px 是指 CSS 中每个屏幕上的 1 个像素吗？

我们都在 CSS 中使用 px 单位来为宽度、高度、边距、字体大小等赋值。但这里的问题是一个像素到底是多少。它是否适用于所有屏幕尺寸？

简短的回答是 px 不固定 , 但是 1px 会有 相同的视觉外观 与屏幕像素比、屏幕尺寸或设备无关。此外，即使在打印机上，1px 线看起来与计算机屏幕上的一样。要知道为什么，请继续阅读。

为什么会这样？

在上面的段落中，您可能会觉得写了两处矛盾的东西，即 px 单位不固定，但具有相同的视觉外观。为了理解这一点，让我们首先研究一下任何显示器中称为 PPI（每英寸像素数）的东西。

PPI，这到底是什么意思！！

通常每个屏幕都由像素组成，像素密度越高，分辨率越高。 PPI 代表每英寸像素，即屏幕上 1 英寸 x 1 英寸正方形中包含的像素。像素是屏幕或计算机图像上的照明或颜色区域。

像素密度因不同的显示器和设备而异。您可能已经注意到，每当我们查看任何显示器或移动设备规格时。术语像素密度会有所不同。 PPI 越高，图像越清晰。

在下图中，小方块是像素，它们共同使图像在屏幕上可见。这是图像在低分辨率设备（或低 PPI 设备）上的外观示例。

现在我们已经了解了像素密度和像素。让我们看看它与单位“px”的关系。

CSS 中定义的 1px 是否正好占用屏幕宽度的 1 个像素？

如果我们查看诸如 cm、mm、inch、pt 之类的单位，无论我们在哪里使用它们，这些单位都是固定的，1cm 将与我们的比例尺上的 1cm 相同。

但这不是 px 的情况。 px 单位是 ** 魔法** CSS 的单位，它与当前字体大小无关，通常也与物理厘米或英寸无关。

px 单位被定义为小但可见，因此可以显示水平 1px 宽的线，边缘锐利（无抗锯齿）。

什么是锋利的、小的和可见的取决于使用它的设备。例如。手机近在眼前，电脑屏幕近在咫尺。因此 px 是 取决于设备类型及其典型用途。

了解一个外观 **像素** ，想象一下 1990 年代的 CRT 电脑显示器。它可以显示的最小点约为 1/100 英寸（0.25 毫米）或更多。这 **像素** 单位得名于那些屏幕像素。

如今，有些设备（视网膜显示器）具有更高的像素密度，即 1 平方英寸内的像素更多，从而导致像素尺寸更小。但是上个世纪使用的文件 **像素** 在 CSS 中看起来还是一样的，不管是什么设备。尤其是打印机，可以显示比 1px 细得多的锐利线条，但即使在打印机上，1px 线条看起来也与在计算机显示器上看起来非常相似。设备变了，但 **像素** 始终具有相同的视觉外观。

这是因为 1px 并不总是占用 1 个像素的图像。我们可以说，对于较旧的 CRT 显示器，但对于当前的技术设备则不然。 1px 可以被认为是 1 英寸的 1/96。

像素 (px) 与查看设备相关。对于低 PPI 设备，1px 是显示器的一个设备像素（点）。对于打印机和高分辨率屏幕，1px 意味着多个设备像素。因此 1px 在所有类型的设备上具有相同的外观。

谢谢你 ！

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/7858/10150111