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/5912/23210100
标签：px,魔法,像素,1px,屏幕,CSS,设备 来源： https://www.cnblogs.com/amboke/p/16645076.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。