CSS 单位参考

CSS 长度单位参考与实时换算，可视化对比。

绝对单位

单位	名称	说明	换算(px)
px	像素	屏幕显示的基本单位	1px = 1px
pt	点	印刷单位，1pt = 1/72in	1pt = 1.333px
pc	派卡	印刷单位，1pc = 12pt	1pc = 16px
in	英寸	1in = 96px = 2.54cm	1in = 96px
cm	厘米	公制长度单位	1cm = 37.795px
mm	毫米	1mm = 0.1cm	1mm = 3.7795px
Q	四分之一毫米	1Q = 0.25mm	1Q = 0.9449px

相对单位

em相对字号

相对于当前元素的 font-size

font-size: 16px → 1em = 16px

rem根元素字号

相对于根元素(html)的 font-size

html { font-size: 16px } → 1rem = 16px

vw视口宽度

视口宽度的 1%

视口宽 1920px → 1vw = 19.2px

vh视口高度

视口高度的 1%

视口高 1080px → 1vh = 10.8px

vmin视口较小值

vw 和 vh 中较小的那个

min(vw, vh)

vmax视口较大值

vw 和 vh 中较大的那个

max(vw, vh)

%百分比

相对于父元素的对应属性

父元素宽 400px → 50% = 200px

ch字符宽度

数字 0 的宽度

等宽字体中 1ch ≈ 1个字符宽

exx字高

小写字母 x 的高度

约为 em 的 0.5 倍

lh行高

当前元素的 line-height 值

line-height: 24px → 1lh = 24px

rlh根元素行高

根元素的 line-height 值

根 line-height: 24px → 1rlh = 24px

cap大写字母高度

大写字母的高度

字体相关

ic表意文字宽度

CJK 字符的宽度

1ic ≈ 1个汉字宽

常见设计规范

根字号默认值

浏览器默认 font-size

1rem = 16px

常用根字号设置

方便计算

62.5% → 1rem = 10px

印刷分辨率

CSS 中的固定换算

1in = 96px (CSS)

移动端断点

sm / md / lg

640px / 768px / 1024px

安全区域

iOS 刘海屏适配

env(safe-area-inset-*)

1dp/pt (移动端)

设备像素比相关

≈ 1.5-3px

使用说明

单位分类

绝对单位：px、pt、pc、in、cm、mm、Q，具有固定的物理或像素换算关系，输出尺寸不随父元素或视口变化；相对单位：em、rem、vw、vh、% 等，依据当前元素字号、根元素字号或视口尺寸动态计算，适合响应式布局

换算器使用

在「单位换算」标签页输入数值并选择源单位，列表会实时显示该值在其他绝对单位下的等值结果。所有换算以 px 为中间基准：源值 × 源单位 baseRatio = 像素值，再除以目标单位 baseRatio 得出结果

使用建议

响应式布局优先使用 rem 与 vw/vh；字号设置推荐 rem 以便统一缩放；间距可用 em 或 rem；精确像素控制场景使用 px；打印样式表使用 pt、cm、mm 等物理单位。根字号设为 62.5% 可让 1rem = 10px，便于心算

注意事项

浏览器默认根字号为 16px，用户可在系统设置中调整，因此 rem 单位的实际像素值会因用户偏好而浮动；vw/vh 包含滚动条宽度（部分浏览器），如需排除滚动条可使用 svw/svh（小视口）或 lvw/lvh（大视口）；ch 单位在非等宽字体下仅代表数字 0 的宽度，不等同于普通字符宽度