使用方法
第一步,在「数值」框里填要换算的数值。页面默认填 1,允许区间是 0 到 1000000000,支持任意小数位;单位不写在框里,由右边的下拉决定,填「16px」这种带字母的写法会被拒绝并给出提示。
第二步,在「从单位」选源数据的单位,在「到单位」选想要的单位。打开页面时它们固定为「em」和「英寸」,也就是em 转英寸这一对;想算像素换算磅、厘米换算毫米,改两个下拉即可,不必换页面。
第三步,点「换算」按钮,或者直接在数值框里裸按 Enter,结果区立刻刷新成「数值 原单位 = 结果 目标单位」这一行,下面那行提示也同步更新,读屏软件会朗读本次结果。
点「载入示例」把三个输入一次性还原成默认值;点「复制结果」把换算式和结果一起放进剪贴板。下方对照表的「导出对照表 CSV」下载带 UTF-8 BOM 的表格,用 Excel 打开中文不会乱码;「复制对照表」按 TSV 复制,可以直接粘进任意表格软件。
如果只是想快速验证一个数字,不必清空重填:改完下拉后结果会自动重算,输入过程中每敲一个字符也会刷新一次。发现结果和预期对不上时,先看红色提示区有没有报错文字,再检查数值是不是落进了允许区间。
这个工具能解决什么问题
第一,把屏幕上的相对单位和物理尺寸接在一起。em 是 CSS 里的相对单位,等于当前元素的字号,本身没有固定的物理大小;英寸却是实打实的物理长度。写响应式样式、做打印样式表、或者跟印刷厂对接时,经常需要知道「16em 到底是多少英寸」。本页按浏览器默认字号一次算清。
第二,掐掉 72 与 96 的混淆。屏幕上 CSS 规定 1 英寸等于 96 像素,印刷世界里 1 英寸等于 72 磅,两个体系的分母不一样,混用就会差出三分之一。本页把像素、磅、派卡、英寸放进同一张因子表,out = in × f[from] ÷ f[to],选哪一对都不会把 96 和 72 搞反。
第三,一次覆盖 CSS 常用长度单位。像素、磅、派卡、em、rem、英寸、厘米、毫米共 8 个单位,任意两个都能互转,写样式、调行高、对印刷尺寸时,不必为每一对单位再找一个页面。
本页不做这些事:不读取你网页的实际字号,em 一律按浏览器默认 16 像素计;不处理 vw、vh 等视口单位和容器查询单位;也不涉及设备像素比与高清屏上的物理英寸偏差。它只回答「一个 CSS 长度值从某单位换成另一单位是多少」。
换算原理与变量说明
核心是一张以「像素」为基准的因子表。CSS 规范把 1 英寸固定为 96 像素,这就是 96dpi 的参考像素;由此 1 厘米 = 96 ÷ 2.54 ≈ 37.7953 像素,1 毫米 ≈ 3.7795 像素。印刷传统里 1 英寸 = 72 磅,所以 1 磅 = 96 ÷ 72 ≈ 1.3333 像素,1 派卡 = 12 磅 = 16 像素。因子表如下:像素 f=1,磅 f=1.3333333333333333,派卡 f=16,em f=16,rem f=16,英寸 f=96,厘米 f=37.79527559055118,毫米 f=3.779527559055118。换算式统一写成 out = in × f[from] ÷ f[to]。
em 是这套表里唯一「会变」的单位。它等于当前元素的 font-size,本页按浏览器默认的 16 像素计,于是 1em = 16 像素 = 12 磅 = 1 派卡 = 96 ÷ 16 = 六分之一英寸。这正是默认示例「1 em = 0.166666666666667 英寸」的来历。
rem 相对根元素字号,默认也是 16 像素,所以本页因子表里 1em = 1rem。但把某个父元素的 font-size 改成 32 像素后,em 的物理尺寸会翻倍,rem 仍跟着根元素走、不受影响——这是 em 与 rem 的关键区别,也是主流样式表更推荐 rem 的原因。
72 与 96 的分歧值得单独说清。96 是 CSS 为屏幕定的参考像素密度,72 是印刷排版沿用数百年的传统点数。1 磅因此等于 96 ÷ 72 ≈ 1.3333 像素而不是 1 像素,1 派卡等于 12 磅也就是 16 像素。把这两个数记牢,屏幕与纸张之间的换算就不会错。
完整示例(默认输入实测)
示例条件与页面默认值完全一致:数值 1、从「em」到「英寸」。逐项核对——取因子 f[em] = 16、f[in] = 96;代入 out = 1 × 16 ÷ 96,得 0.166666666666667;结果区显示「1 em = 0.166666666666667 英寸」。
换几个数值验证线性关系,结果完全跟着输入走:
- 输入 16:16 × 16 ÷ 96 = 2.666666667 英寸,大约是一行默认字号文字的高度量级;
- 输入 12:12 × 16 ÷ 96 = 2 英寸,整数结果,方便手工核对;
- 把两个下拉对调成英寸转 em、输入 1:1 × 96 ÷ 16 = 6,正是对照表最后一行「1 英寸 = 6 em」。
再换一对单位交叉验证:从 em 到派卡,f[pc] = 16,out = 1 × 16 ÷ 16 = 1,正好落在「1 派卡 = 12 磅 = 16 像素」这条定义上;从 em 到磅则是 12,与「1 英寸 = 72 磅」彼此自洽。三处数字闭环,说明因子表内部没有矛盾。
需要提醒:0.166666666666667 是保留 15 位小数再去掉尾零的结果,双精度下 16 ÷ 96 实际是无限循环小数,页面按显示规则截到这一位;要十位有效数字的版本可参考对照表里的 0.1666666667。
对照表
下表以「1 个原单位」为基准给出换算结果,共 8 行,全部直接显示。前 7 行是 1 em 分别等于多少像素、磅、派卡、rem、英寸、厘米、毫米;最后一行是反查用的 1 英寸 = 6 em。数值全部由上面的因子表推导,和计算器算出的结果同源。
把这张表当成速查手册:写打印样式时想知道 2em 的行高折合多少毫米,就把「em 到毫米」那一行乘 2;看到设计稿标注 12pt,用「em 到磅」那一行除一下即可。表里没有列出的组合,用上方计算器任选两个单位同样算得出来。
需要提醒:对照表描述的是单位与单位之间的固定比例,与你上方填的具体数值无关;你自己的实算结果请以上方结果区为准。
结果边界与舍入
- 输入范围。「数值」允许 0~1000000000。空值、非数字、负数、超出上限这四种情况都会弹出具体的中文提示,写明出问题的字段和允许区间,不会静默当成 0 处理。
- 两个单位相同。若「从单位」和「到单位」选了同一个,结果恒等于输入值。页面照常算出结果,同时在提示行写明「源单位与目标单位相同,结果恒等于输入值,请改选目标单位」,把它当作提醒而不是错误。
- 大数与极小数的显示。结果小于 1e-12 或大于等于 1e15 时改用六位小数的科学计数法。本页的典型结果落在 0.1 到 100 之间,都按普通小数显示:em 转毫米约 4.23,英寸转像素是 96,都不会出现指数形式。
- 中间量级的处理。绝对值大于等于 1 时按 10 位有效数字取位再去掉多余的零;绝对值小于 1 时先取 15 位小数再去掉尾部零。这样 2 不会被写成 2.000000000,0.166666666666667 也不会被截成 0.17。
- 浮点误差的量级。16 与 96 都是精确值,但 96 ÷ 2.54 在双精度下有 1e-16 量级的表示误差,折算到厘米、毫米因子上仍然远小于显示位数,整数部分的位置是可靠的。
- 全程本地。换算只在当前浏览器里做,不发起网络请求,不写 Cookie 和 localStorage,关掉页面什么都不剩。
常见问题
1em 到底等于多少英寸?
按浏览器默认字号 16 像素计算,1em = 16 像素,而 CSS 规定 1 英寸 = 96 像素,所以 1em = 16 ÷ 96 = 六分之一英寸,约 0.166666666666667 英寸。前提是当前字号确实是默认的 16 像素。
em 和 rem 有什么区别?
em 相对当前元素的字号,会随父级字号设置层层放大;rem 相对根元素字号,全页面只有一个基准。默认都是 16 像素时两者相等,一旦某层父级改了字号,em 的物理尺寸会变,rem 不变。
为什么 1 英寸既是 96 像素又是 72 磅?
因为两套体系的分母不同。CSS 为屏幕定义 1 英寸 = 96 像素;印刷排版沿用 1 英寸 = 72 磅。所以 1 磅 = 96 ÷ 72 ≈ 1.3333 像素。屏幕设计与印刷输出对接时,这个换算最容易出错。
派卡是什么单位,为什么等于 16 像素?
派卡(pc)是印刷长度单位,1 派卡 = 12 磅。1 磅又等于 96 ÷ 72 ≈ 1.3333 像素,12 磅正好 16 像素,所以本页 1 派卡 = 1em(默认字号下),可以当作交叉验证的一对。
我的网页字号不是 16 像素,结果还准吗?
本页按浏览器默认 16 像素计算,适合绝大多数未改字号的场景。若你的样式把字号改成了别的值,em 一列的物理尺寸会等比例变化,rem、英寸、厘米等列不受影响,仍按原值使用。
厘米的因子 37.7953 是怎么来的?
由 1 英寸 = 2.54 厘米和 1 英寸 = 96 像素两条定义联立得到:1 厘米 = 96 ÷ 2.54 ≈ 37.7953 像素,毫米再除以 10,约 3.7795 像素。这两个数都是精确定义的除法结果。
我的数值被拒绝提示「超出范围」怎么办?
本页允许 0~1000000000。若填了负数、或把 1 亿写成 10 亿,会触发拒绝并提示具体边界;把数值调回 0~10 亿区间即可正常换算。
结果会被上传吗?
不会。所有换算只在你当前浏览器本地完成,页面不发起任何网络请求,也不写 Cookie 或 localStorage。开发者工具 Network 面板里连点几次换算,始终是空的。