css 之绝对长度单位:cm、mm、Q、in、pt、pc、px

本文翻译自 csswg 草案 :

5.2. Absolute Lengths: the cm, mm, Q, in, pt, pc, px units

绝对长度单位间的比率是固定的,并且锚定了一些物理测量值。它们主要用于输出环境已知的情况。绝对长度单位包括物理单位in, cm, mm, pt, pc, Q)和视角单位px)(译者:请记住这两个名词,之后会频繁提到):

单位 单位 等效值
cm 厘米 1cm = 96px/2.54
mm 毫米 1mm = 1/10th of 1cm
Q 四分之一毫米 1Q = 1/40th of 1cm
in 英寸 1in = 2.54cm = 96px
pc 派卡(pica) 1pc = 1/6th of 1in
pt 1pt = 1/72nd of 1in
px 像素 1px = 1/96th of 1in

例:

css 复制代码
h1 { margin: 0.5in }      /* inches  */
h2 { line-height: 3cm }   /* centimeters */
h3 { word-spacing: 4mm }  /* millimeters */
h3 { letter-spacing: 1Q } /* quarter-millimeters */
h4 { font-size: 12pt }    /* points */
h4 { font-size: 1pc }     /* picas */
p  { font-size: 12px }    /* px */

译者pcpt 是印刷行业使用的长度单位,1pc = 12pt。当使用这两单位时,无论如何显示,印刷出的长度都是一致。这就是前面提到的"它们主要用于输出环境已知的情况",在此处,所谓"输出环境"就是指打印机。我们通常不会在屏幕上使用"厘米"这样的绝对单位,唯一常用的绝对单位估计是"像素"。

所有的绝对长度单位都是兼容的,px 是它们的标准单位

译者兼容单位是指在计算值时,兼容单位会被转换成某个标准单位,比如 1in = 96 px。

对于 CSS 设备,这些单位的锚定要么

1.靠将物理单位in, cm, mm, pt, pc, Q)与其物理测量相关联,

2.要么靠将 px 与参考像素相关联。

对于具有典型观看距离的印刷媒体,锚定单位应该是某一个物理单位(英寸,厘米等)。对于屏幕媒体(包括高分辨率设备)、低分辨率设备和具有异常观看距离的设备(devices with unusual viewing distances),推荐将锚定单位改为像素单位。对于这样的设备,建议像素单位是使得最接近参考像素设备像素的总数(For such devices it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.)(译者:关于这个定义,在阅读参考像素和设备像素的定义后会清晰一些)。

译者设备像素是能够显示全部颜色的设备输出区域的最小单位。对于典型的彩色屏幕,它是一个包含红色、绿色和蓝色子像素的正方形或矩形区域。这一定义在许多非传统的输出设备上可能不是很准确,例如以更高的分辨率显示某些颜色。然而,这些设备仍然有一些等效于"设备像素"概念。
NOTE: 如果锚定单位是像素单位,物理单位可能和它们的物理测量者并不匹配。或者,如果锚定单位是物理单位,像素单位可能并不会完全映射到设备像素。
NOTE: 这里关于像素单位和物理单位的定义不同于早期 CSS1 和 CSS2 版本的定义。特别是,在之前的版本中,CSS 像素单位和物理单位间并没有固定的比率:物理单位总是和它们的物理测量值绑定,而像素单位会变换以接近参考像素。(这是因为现有太多内容都是基于 96dpi 的假设,打破这个假设会破坏现有内容。)
NOTE : 单位是 ASCII 大小写不敏感(ASCII case-insensitive)的,并会序列化为小写,例如 1Q 序列化为 1q。

参考像素是一个角度,即在距离像素密度为 96dpi 的设备一臂长时一像素的视角。对于标称臂长,这个长度是 28 英寸,因此这个视角大约是 0.0213 度。对于这个观看距离,一像素相当于 0.26 毫米( 1/96 英寸)。

下图说明了观看距离对参考像素大小的影响:在观看距离为 71 厘米( 28 英寸)时,参考像素为 0.26 毫米,而观看距离为 3.5 米( 12 英尺)时为 1.3 毫米。

(如果观看距离增加,像素必须变大。图源:drafts.csswg.org/css-values-...

第二张图说明了设备的分辨率对像素单位的影响:在低分辨率设备(例如典型的计算机显示器)中,1px 乘 1px 的区域被单个设备像素点覆盖,而在高分辨率设备(例如打印机)中,相同的区域被 16 个点覆盖。

(高分辨率设备比低分辨率设备(相同近似观看距离)需要更多的设备像素(点)覆盖 1px 乘 1px 的区域。图源:drafts.csswg.org/css-values-...

相关推荐
_AaronWong44 分钟前
Electron 实现仿豆包划词取词功能:从 AI 生成到落地踩坑记
前端·javascript·vue.js
cxxcode1 小时前
I/O 多路复用:从浏览器到 Linux 内核
前端
用户5433081441941 小时前
AI 时代,前端逆向的门槛已经低到离谱 — 以 Upwork 为例
前端
JarvanMo1 小时前
Flutter 版本的 material_ui 已经上架 pub.dev 啦!快来抢先体验吧。
前端
恋猫de小郭1 小时前
AI 可以让 WIFI 实现监控室内人体位置和姿态,无需摄像头?
前端·人工智能·ai编程
哀木1 小时前
给自己整一个 claude code,解锁编程新姿势
前端
程序员鱼皮2 小时前
GitHub 关注突破 2w,我总结了 10 个涨星涨粉技巧!
前端·后端·github
UrbanJazzerati2 小时前
Vue3 父子组件通信完全指南
前端·面试
是一碗螺丝粉2 小时前
5分钟上手LangChain.js:用DeepSeek给你的App加上AI能力
前端·人工智能·langchain
wuhen_n2 小时前
双端 Diff 算法详解
前端·javascript·vue.js