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-...

相关推荐
Book_熬夜!9 分钟前
CSS—补充:CSS计数器、单位、@media媒体查询
前端·css·html·媒体
几度泥的菜花1 小时前
如何禁用移动端页面的多点触控和手势缩放
前端·javascript
狼性书生1 小时前
electron + vue3 + vite 渲染进程到主进程的双向通信
前端·javascript·electron
肥肠可耐的西西公主1 小时前
前端(AJAX)学习笔记(CLASS 4):进阶
前端·笔记·学习
拉不动的猪1 小时前
Node.js(Express)
前端·javascript·面试
Re.不晚2 小时前
Web前端开发——HTML基础下
前端·javascript·html
几何心凉2 小时前
如何处理前端表单验证,确保用户输入合法?
前端·css·前端框架
浪遏2 小时前
面试官😏: 讲一下事件循环 ,顺便做道题🤪
前端·面试
Joeysoda2 小时前
JavaEE进阶(2) Spring Web MVC: Session 和 Cookie
java·前端·网络·spring·java-ee
小周同学:3 小时前
npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本。
前端·npm·node.js