阅读 1070

(Ⅱ)弄懂 CSS“绝对长度单位” | CSS 值和单位

原创:itsOli  @前端一万小时

本文首发于公众号「前端一万小时」

本文版权归作者所有,未经授权,请勿转载!

本文节选自“语雀”私有专栏「前端一万小时 | 从零基础到轻松就业」
复制代码


🔗紧接上篇文章

2 绝对长度单位

描述现实世界的长度单位有很多。

厘米(cm)、毫米(mm)、英寸(in)、点(pt)、派卡(pc)等都属于绝对长度单位。“点”和“派卡”是印刷术语,用作印刷的度量单位。

  • 1 英寸 = 2.54 厘米

  • 1 厘米 = 0.394 英寸

  • 1 英寸 = 72 点

  • 1 英寸 = 6 派卡

  • 1 派卡 = 12 点

为什么我们要使用这么多的单位?可以简单理解成不同地区对长度单位的定义不同,有各种各样的历史遗留问题。

我们在现实世界中描绘的长度,是一维空间(点到点的长度表示的内容)的度量,是客观存在且固定的物理距离,只是人们会用不同的单位去表达。而对于电子屏幕,使用的长度单位和方式,和一维世界是不同的。

对于当今的编程语言来说,长度是一个相对的概念。


3 相对长度单位

3.1 px

显示器成像是由无数个可以发出单一色彩的显像管组成,而这个最小的成像单位和长度,我们就称为——像素。而一台显示器,包含的有效像素,即称为——分辨率,通常使用宽、高的像素数量进行标示。理论上越大的分辨率,可以容纳的画面内容就越多(显示的内容更多、更清晰)。

px 被定义为相对单位,是因为它取决于显示器的分辨率。一旦分辨率确定,设置为 px 的尺寸就成为固定尺寸,不会自动缩放。

但,关于 px 我们还有以下信息需要掌握:

如果我们同时使用分辨率为 1920* 1080 的两个屏幕,尺寸不一样,那么就出现了新的概念—— PPI,即“每英寸包含的像素数量”(像素的密度单位,PPI 值越高,画面的细节就会越丰富)。

DPI ——是指输出分辨,针对输出设备而言的,每英寸包含的墨点数量。

❗️所以,像素(px)在真实世界中的大小是不固定的。曾经,普通的显示器里,我们用像素就可以描述大多数的情况。但是,“视网膜屏幕 Retina”诞生后,旧有平台的图像如果根据其实际像素在视网膜屏幕中显示时,字体、图标等就会变得特别小:

为了适应实际使用体验和兼容性,厂商发展出了“像素合并技术”(输出来的图像、文字比以前更细腻,因为可以显示的细节更多),过去 1px 的面积包含了更多的像素单位:

所以,很多时候直接使用 px 作为长度单位已经无法满足日常的需求,需要依具体情况而定。

💡在以后学习的移动端前端开发中,iOS 和安卓没有“像素”这个单位,我们用 PT/DP 来描绘在一个屏幕中各个元素的大小。


下一篇我们继续讲解 CSS“相对长度单位”剩下的内容。

祝好,qdywxs ♥ you!

关注下面的标签,发现更多相似文章
评论