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 */

译者 :pc 和 pt 是印刷行业使用的长度单位,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-... )

相关推荐
Java后端的Ai之路5 小时前
06-React-Props
前端·react.js·前端框架
Flynt5 小时前
开源"间谍卫星"说数据全是真的,我把它的免key数据源挨个试了一遍
前端·开源·数据可视化
Csvn6 小时前
渲染管线
前端
程序员大阳6 小时前
副队长CSS教程(33)–圆角与透明
前端·css·透明·圆角
志尊宝6 小时前
Vue3 零基础每日笔记(082):文件上传实战——el-upload 校验、自定义上传、头像预览
前端·javascript·vue.js·笔记·#javascript·#vue.js
鬼手点金6 小时前
opencode-rules 插件
java·开发语言·前端·人工智能·chrome·git·github
柳杉6 小时前
借助 Codex 和可视化工作流,从调研到完整实现,3D 大屏竟然可以这么简单
前端·ai编程·数据可视化
IMPYLH7 小时前
HTML 的 <wbr> 元素
前端·html
Dovis(誓平步青云)7 小时前
常用命令藏得太深?怎么做一个快捷命令坞
运维·前端·自动化·音视频·prometheus
IT_陈寒8 小时前
Vite的这个问题坑了我三天,原来如此解决!
前端·人工智能·后端