使用方法
- 在「数值」框里填排版长度,默认 1,支持小数,允许区间 0~10000。填负数、字母或留空都会得到写明字段名与允许区间的中文提示,不会被静默归零。
- 「从单位」选手上的单位,「到单位」选目标单位。本页默认从「em」到「毫米」,也就是 em转毫米这一对;两个下拉里都含 em、rem、像素、磅、派卡、英寸、厘米、毫米共八种排版单位,任意两个都能互转。
- 点「换算」或在数值框里裸按 Enter,结果区立刻给出「1 em = 4.233333333 毫米」,提示行同时写出本次用到的两个因子与完整算式。
- 点「对调单位」做反向验证:把 4.233333333 毫米换回去应当得到 1 em;点「复制结果」把这句换算式放进剪贴板,直接贴进设计文档或交付说明。
- 下方对照表是单位之间的固定比值,九行一次性全部显示,不足十二行不做折叠;需要带走时点「导出对照表 CSV」得到带 BOM 的文件,或点「复制对照表」按 TSV 粘进表格软件。
这个工具能解决什么问题
一是把弹性单位落到印厂的物理口径。网页里间距写 1.5 em、图标写 2 em,设计师与前端都能理解;但印厂、切割机、亚克力雕刻只认毫米。把 em 换成毫米,就能直接回答「这个间距实际多宽」,避免各说各的单位单位导致返工。
二是把 16 像素这个隐含前提显性化。很多人默认「1 em 就是 16 像素」,但这只是浏览器默认字号下的取值,父级字号一改就全变。本页把基准写在对照表与提示行里,让每一次换算都能追溯到「按 16 像素算」这一前提,而不是把它当成物理常数。
三是一次覆盖排版维度的全部常用单位。em、rem、px、pt、pc、in、cm、mm 八个单位任意两两互转,不必为「磅转像素」「派卡转毫米」各找一个页面,内核都是同一张因子表,做设计规范与组件库文档时尤其省事。
本页不做这些事:不读取你页面里真实的 font-size 计算上下文;不换算物理设备的实际显示尺寸(那取决于设备像素比与缩放);不处理角度、颜色或字体选择。它只回答「一个排版长度从某单位换成另一单位是多少」。
换算原理与变量说明
两条定义叠加出像素与毫米的关系。第一条:CSS 规定 1 英寸 = 96 像素,这是固定换算,不是近似。第二条:国际英寸定义为 1 英寸 = 25.4 毫米,这是物理定义。两式合并得 1 毫米 = 96 ÷ 25.4 = 3.779527559055118 像素,反过来 1 像素 = 25.4 ÷ 96 = 0.264583333 毫米。96 不能被 25.4 除尽,所以这个系数是无限小数,本页取双精度能表示的完整位数。
核心公式只有一条。本页以「像素」为基准,给每个单位一个因子 f,表示该单位等于多少像素:像素 1、磅 1.3333333333333333、派卡 16、em 16、rem 16、英寸 96、厘米 37.79527559055118、毫米 3.779527559055118。换算写作 out = in × f[from] ÷ f[to],把 1 em 换成毫米即 1 × 16 ÷ 3.779527559055118 = 4.233333333。
磅与派卡为什么是这两个数。1 磅 = 1/72 英寸,于是 96 ÷ 72 = 1.3333333333333333 像素;1 派卡 = 12 磅 = 16 像素,正好等于 1 em。所以对照表里「1 em = 12 磅」「1 em = 1 派卡」是同一件事的两种写法,印刷与网页在这里恰好对齐。
em 的前提:它是相对单位。1 em 等于当前元素的 font-size,浏览器默认字号是 16 像素,于是「1 em = 16 px」成立。但这个前提随时可能被打破:父级设了 font-size: 20px,1 em 就变成 20 像素,换算成毫米是 5.291666667 而不是 4.233333333;用在 font-size 属性自身时,em 参照的是父级的字号,用在 width、padding 上参照的是自身字号,嵌套越深差别越大。rem 始终参照根元素字号,不受嵌套影响,这也是它在组件库里更受偏爱的原因。
物理毫米取决于设备,不是取决于 CSS。CSS 像素是参考像素(约等于 1/96 英寸的视角单位),只有在 96 DPI 且缩放 100% 的屏幕上,96 像素才对应于物理上的 1 英寸。高分屏、打印、移动端都会改变这个换算:打印时浏览器按物理英寸排版,毫米才是权威单位;屏幕上则由设备像素比与系统缩放决定。本页算的是 CSS 规范下的数值换算,不是你眼前那块屏幕的实测尺寸。
完整示例(默认输入实测)
示例条件与页面默认值完全一致:数值 1、从「em」、到「毫米」。逐项核对:取因子 f[em] = 16、f[mm] = 3.779527559055118;套公式 out = 1 × 16 ÷ 3.779527559055118 = 4.233333333;结果区显示「1 em = 4.233333333 毫米」,与对照表第七行一致。
再换四组数值交叉验证,用的仍是同一条公式:
- 0.5 em = 0.5 × 16 ÷ 3.779527559055118 = 2.116666667 毫米,半倍字号的间距;
- 1.5 em = 1.5 × 16 ÷ 3.779527559055118 = 6.35 毫米,正好是 24 像素,也是正文章距的常见取值;
- 12 em = 12 × 16 ÷ 3.779527559055118 = 50.8 毫米,恰好 2 英寸;
- 16 em = 16 × 16 ÷ 3.779527559055118 = 67.73333333 毫米,一整行默认字号高度的十六倍。
反向同样成立:把 4.233333333 毫米从「毫米」换到「em」,得 1 em;把 50.8 毫米换回去得 12 em。正向与反向共用同一对因子,不会出现两个方向对不上的情况。
对照表
下表以「1 em」为基准,列出它等于多少其它排版单位;倒数第二行给出反向换算「1 毫米 = 0.236220472440945 em」,最后一行补充「1 rem = 16 像素」。所有数值都由上面的因子表算出,不是手抄的经验值。
前四行的像素、磅、派卡、rem 都是整齐的整数或有限小数,因为它们在 CSS 里被定义为与像素成简单比例;后三行的英寸、厘米、毫米带有长小数,根源是 96 与 25.4 除不尽,属于定义造成的,不是计算误差。
对照表与你上方输入的数值无关,它是「单位与单位之间」的固定比值;你自己的实算结果请看上方结果区。需要带走时,点「导出对照表 CSV」得到带 UTF-8 BOM 的文件,Excel 打开中文不乱码;点「复制对照表」得到 TSV,可直接粘进任意表格软件。
结果边界与舍入
- 数值范围。接受 0~10000,步进 step=any。空值、非数字、负数、超过 10000 分别给出写明字段名与允许区间的中文提示,不会静默输出 0 或 NaN。
- 单位相同。两个下拉选到同一单位时,页面照常算出结果(恒等于输入值),同时在提示区写明「源单位与目标单位相同,结果恒等于输入值,请改选目标单位」,不按错误处理。
- 舍入口径。结果按十位有效数字输出:绝对值大于等于 1 时先取 toPrecision(10) 再去掉末尾多余的零,小于 1 时先取十五位小数再去掉尾部零。所以 6.35 显示成 6.35、4.233333333 保留九位小数,不会出现 4.2333333329999 这类浮点尾巴。
- 系数本身的位数。3.779527559055118 已到双精度能稳定表示的上限,再往后没有意义;用它参与多次连续换算时,末位可能有 1 个单位的抖动,做精密排版请以像素为中间单位一次性换算。
- 基准依赖。em 与 rem 按 16 像素基准计算,与浏览器默认根字号一致;若项目根字号不是 16,请按「实际字号 ÷ 16」的比例缩放本页结果,或先把字号换算成像素再来对照。
- 全程本地。所有计算只在当前浏览器执行,不发起网络请求,不写 Cookie 与 localStorage,刷新即回到默认示例。
常见问题
为什么 1 em 是 4.233333333 毫米而不是整齐的数?
因为 1 毫米 = 96 ÷ 25.4 = 3.779527559055118 像素,96 不能被 25.4 除尽。1 em = 16 像素,16 ÷ 3.779527559055118 = 4.233333333,小数是两条定义叠加的结果,不是算错。
父级字号不是 16 像素时怎么办?
本页按 16 像素基准计算。父级设为 20px 时 1 em = 20 像素 = 5.291666667 毫米。做法是用「实际字号 ÷ 16」乘本页结果,或先在下拉里把像素换成毫米,再按实际字号缩放。
em 和 rem 的换算结果为什么一样?
因为在本页的因子表里两者都按 16 像素计。区别在参照对象:em 参照当前元素(或父级)的字号,会随嵌套变化;rem 始终参照根元素字号,不受嵌套影响。
1 em = 1 派卡,是不是写错了?
没有。1 派卡 = 12 磅,1 磅 = 96 ÷ 72 = 1.3333333333333333 像素,12 × 1.3333333333333333 = 16 像素 = 1 em。印刷的派卡与网页的 em 在 16 像素基准下恰好相等。
屏幕上的 1 em 真的是 4.233333333 毫米吗?
本页给的是 CSS 规范下的换算值。屏幕上的物理尺寸还取决于设备像素比与系统缩放,高分屏上一 CSS 像素往往对应多个物理像素;打印时才由物理英寸说了算。
输入负数或字母会怎样?
排版长度不能为负,页面会提示「数值」是负数,请填 0~10000 之间的数字;填字母会得到「不是有效数字」的提示。两条提示都写明字段名与允许区间,不会静默归零。
两个下拉选了同一个单位会报错吗?
不会报错。页面照常算出结果,它恒等于你的输入值,同时在提示区写明源单位与目标单位相同,请改选目标单位,方便你发现是选错了而不是算错了。
我的数据会被上传吗?
不会。所有换算只在当前页面本地执行,不发起网络请求,也不记录历史或写 Cookie,刷新即回到默认示例。
相关工具
- em转像素:把 em 落到像素口径,先查像素再谈物理尺寸。
- em转厘米:同一换算的厘米版本,适合较大的版面尺寸。
- em转英寸:印刷与 CSS 的英寸口径对照,1 em = 0.166666666666667 英寸。
- 英寸转像素:验证 1 英寸 = 96 像素这条定义在本站的取值。
- rem转派卡:rem 与派卡的互转,做跨媒体排版时常用。
更多排版与长度单位换算见单位换算分类页。