px,魔法单位 | CSS

2022/9/1 6:53:09

本文主要是介绍px,魔法单位 | CSS,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

px,魔法单位 | CSS

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

Minecraft pixel art

我们都在 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/5912/23210100



这篇关于px,魔法单位 | CSS的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程