返回 Demo 索引

CSS 长度单位探索器

在浏览器里对照绝对单位与相对单位,用同一套基准观察它们如何换算、如何随字体与视口变化。

单位对比

第一组
第二组
- -

单位对照表

各列出 1 单位量的示意条与约略像素;ex、ch 等为浏览器内估算。
绝对单位
单位 描述 可视化 计算值 (px)
cm厘米
-
mm毫米
-
Q四分之一毫米
-
in英寸 (1in = 96px)
-
pc派卡 (1pc = 16px)
-
pt点 (1pt = 1/72in)
-
px像素 (相对于设备)
-
相对单位
单位 描述 可视化 计算值 (px)
em相对于元素字体大小
-
rem相对于根元素字体大小
-
ex相对于字符 "x" 的高度
-
ch相对于字符 "0" 的宽度
-
vw视口宽度的 1%
-
vh视口高度的 1%
-
vmin视口较小尺寸的 1%
-
vmax视口较大尺寸的 1%
-
%相对于父元素 (通常宽度)
-
cap相对于大写字母高度
-
ic相对于表意字符宽度
-
lh相对于自身行高
-
rlh相对于根元素行高
-
vi相对于视口内联尺寸
-
vb相对于视口块级尺寸
-