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

相关推荐
浮华似水20 分钟前
简洁之道 - React Hook Form
前端
正小安2 小时前
如何在微信小程序中实现分包加载和预下载
前端·微信小程序·小程序
_.Switch4 小时前
Python Web 应用中的 API 网关集成与优化
开发语言·前端·后端·python·架构·log4j
一路向前的月光4 小时前
Vue2中的监听和计算属性的区别
前端·javascript·vue.js
长路 ㅤ   4 小时前
vite学习教程06、vite.config.js配置
前端·vite配置·端口设置·本地开发
长路 ㅤ   4 小时前
vue-live2d看板娘集成方案设计使用教程
前端·javascript·vue.js·live2d
Fan_web4 小时前
jQuery——事件委托
开发语言·前端·javascript·css·jquery
安冬的码畜日常4 小时前
【CSS in Depth 2 精译_044】第七章 响应式设计概述
前端·css·css3·html5·响应式设计·响应式
赛男丨木子丿小喵4 小时前
visual studio2022添加新项中没有html和css
css·html·visual studio
莹雨潇潇5 小时前
Docker 快速入门(Ubuntu版)
java·前端·docker·容器