使用方法
- 「数值」默认 1,范围 0 到 100000,支持小数;「源单位」默认 rem,「目标单位」默认派卡。改动任意一项立刻重算,光标停在数值框里按回车同样触发。
- 两个单位下拉各有八个选项:像素、磅、派卡、em、rem、英寸、厘米、毫米,全部以 CSS 像素为唯一中间基准;任选两个组合都能算,反过来把派卡换成 rem 也成立。
- 「小数位」默认 6,范围 0 到 12。派卡与毫米之间要过 3.779527559055118 这条因子,几乎必然出小数,位数给少了看不出 4.23333333333 mm 与六分之一英寸是同一件事。
- 「批量换算」默认已经写好五行示例,每行一条「数值 + 空格 + 单位」。单位一栏大小写不敏感,REM 与 rem 查的是同一条系数;按 Ctrl+Enter(Mac 上 Cmd+Enter)一次算完,框被清空时点「换算」会自动填回示例。
- 结果区从上到下依次是主等式、折合像素数、单位汇率、口径说明、八个单位的展开清单和批量结果,用来核对数量级有没有错位。
- 清单下面是一张 24 行阶梯表,把当前数值乘 0.25 到 500 逐档换算,默认显示 12 行,点「加载更多」展开全部,点「导出 CSV」存成带字节序标记的文件。
- 「交换单位」把源与目标对调,用来反着核一遍;「复制结果」复制整段结论;「复制对照表」复制正文那张单位锚点表,制表符分隔,可直接粘进表格软件。
- 数值为空、为负、超上限、不是数字,小数位不是 0 到 12 的整数,批量行缺空格或单位不在八种之内,都会给出指明行号与原因的具体提示。
这个 rem 转派卡换算器能解决什么问题
CSS 的长度单位分成绝对与相对两支:pt、pc、in、cm、mm 锚在物理尺寸上,em 与 rem 锚在字号上。本站这一页的名称「rem转派卡」,指的就是把相对单位 rem 折算成绝对单位派卡;本页同时收录像素、磅、em、英寸、厘米、毫米共八种单位,选好源单位与目标单位即可任意互换,反方向也算。
第一类是核对印刷稿与屏幕排版。设计师给的版式标 12 pc 的栏宽,前端落地时要知道它等于 192 px、144 pt、50.8 mm;反过来 0.5 rem 在默认字号下是 8 px、6 pt、2.11666666667 mm。两套单位混在同一份标注里时,直接换算比来回问人要快。
第二类是排查「字号越缩越小」这类布局事故。嵌套三层 1.2em 的最终字号是 1.728 em,也就是 27.648 px;同样三层用 rem 仍然是 1.2 rem = 19.2 px。两者相差 1.44 倍,根子在 em 相对父元素而 rem 相对根元素。先用本页把目标像素算出来,再决定该写 em 还是 rem。
第三类是写打印样式表。屏幕上的 rem 到了打印机上没有任何锚点,打印尺寸由纸张物理尺寸决定。给 @media print 写样式时要把 rem 换成 pt、pc、mm 这类绝对单位,否则同一份 HTML 在不同打印机上的行宽会飘。
第四类是处理引进来的排版稿。传统美式派卡是 0.166044 in,即 4.2175176 mm,比 CSS 用的 PostScript 派卡小 0.37 个百分点;TeX 点是 1.32835201328 px,也比 PostScript 点小 0.37 个百分点。老稿件整体的字号因此会比 Web 上的设定略小一点点。
计算原理与变量说明
八种长度单位各自登记一个「相当于多少 CSS 像素」的因子 F,换算公式只有一行:结果 = x × F[源单位] ÷ F[目标单位]。以 CSS 像素为唯一中间量,五十六个换算方向共用同八条系数,正反两个方向自然互为逆运算。
| 单位 | 折算因子(px) | 定义来源 |
|---|---|---|
| 像素 px | 1 | CSS 参考像素,基准单位 |
| 磅 pt | 1.3333333333333333 | PostScript 点,96 ÷ 72 |
| 派卡 pc | 16 | 12 pt,即 96 ÷ 6 |
| em | 16 | 相对父字号,本页按 16 px 计 |
| rem | 16 | 相对根字号,本页按 16 px 计 |
| 英寸 in | 96 | CSS 绝对锚点 |
| 厘米 cm | 37.79527559055118 | 96 ÷ 2.54 |
| 毫米 mm | 3.779527559055118 | 96 ÷ 25.4 |
1 rem 恰好等于 1 pc 是巧合,不是规律。派卡的定义是六分之一英寸,96 ÷ 6 = 16 px;rem 只有在根字号为默认 16 px 时才等于 16 px。两者在默认设置里撞在一起,但性质完全不同:pc 是绝对单位,永远等于 16 px;rem 是相对单位,会跟着根字号走。
改根字号之后等式立即失效。把根字号调到 20 px,1 rem 变成 20 px,也就是 1.25 pc;调到 12 px,1 rem 等于 12 px,也就是 0.75 pc。而 1 pc 始终是 16 px、12 pt、4.23333333333 mm、0.423333333333 cm,一个数都不会变。用 rem 排版时改根字号会整体缩放,用 pc 排版不会。
本页的因子按根字号 16 px 登记。所以表里的 em 与 rem 都写成 16 px。若项目里改过 html 的 font-size,请先把目标 rem 值乘上实际根字号得到 px,再用 px 当源单位换算,这样不会踩到 16 px 这条默认假设。
em 会复合,rem 不会。1.2em 嵌三层等于 1.2 × 1.2 × 1.2 = 1.728 em,代进 16 px 的根就是 27.648 px;同样三层写成 rem,结果仍是 1.2 rem = 19.2 px。27.648 与 19.2 相差 1.44 倍,这是 CSS 里最经典的字号事故根源。
派卡与点各有两个版本。CSS 用的是 PostScript 派卡,即 1/6 in = 4.23333333333 mm;传统美式派卡是 0.166044 in = 4.2175176 mm,比它小 0.37 个百分点。点也一样:PostScript 点是 1/72 in = 1.33333333333 px,TeX 点是 1/72.27 in = 1.32835201328 px,两者同样相差 0.37 个百分点。
完整示例(数值仅作演示)
打开页面时四个控件的默认值是数值 1、源单位 rem、目标单位派卡、小数位 6,结果是 1 rem = 1 pc。把同一数值展开到八个单位:16 px、12 pt、1 pc、1 em、1 rem、0.166666666667 in、0.423333333333 cm、4.23333333333 mm。
批量框默认五行,目标单位派卡:1 rem 得 1;2 REM 得 2;0.75 rem 得 0.75;12 rem 得 12;16 px 得 1。单位一栏大小写不敏感,第二行的 REM 与第一行的 rem 走同一条系数;最后一行用 px 改写同一个数值,正好把「1 pc = 16 px」验算一遍。
反方向核对:点「交换单位」后 1 pc 应得回 1 rem;12 pc 换成毫米是 50.8 mm,换成像素是 192 px,换成英寸是 2 in。三条路径互为倒数,任一对不上就说明中间假设的根字号不是 16 px。
改根字号的两个例子:根字号 20 px 时 1 rem = 20 px = 1.25 pc;根字号 12 px 时 1 rem = 12 px = 0.75 pc。这两个数可以直接用来判断某份设计标注是不是在默认字号下写的。
rem 与派卡对照表
下表给出 rem 换成像素、磅、派卡与毫米的对应值,全部由 16、1.3333333333333333 与 3.779527559055118 三条因子算出,按 12 位有效数字保留,且假设根字号为默认 16 px。
| rem | px | pt | pc | mm |
|---|---|---|---|---|
| 0.5 | 8 | 6 | 0.5 | 2.11666666667 |
| 0.75 | 12 | 9 | 0.75 | 3.175 |
| 1 | 16 | 12 | 1 | 4.23333333333 |
| 1.5 | 24 | 18 | 1.5 | 6.35 |
| 2 | 32 | 24 | 2 | 8.46666666667 |
| 3 | 48 | 36 | 3 | 12.7 |
| 4 | 64 | 48 | 4 | 16.9333333333 |
| 6 | 96 | 72 | 6 | 25.4 |
| 8 | 128 | 96 | 8 | 33.8666666667 |
| 12 | 192 | 144 | 12 | 50.8 |
第二张表把派卡与点的两个版本并排放在一起。差量都是 0.37 个百分点,量上看不大,累积到整页行距上就能看出偏向。
| 单位版本 | 定义 | 折算 px | 折算 mm |
|---|---|---|---|
| PostScript 派卡(CSS 用) | 1/6 in | 16 | 4.23333333333 |
| 传统美式派卡 | 0.166044 in | 15.940224 | 4.2175176 |
| PostScript 点(CSS 用) | 1/72 in | 1.33333333333 | 0.352777777778 |
| TeX 点 | 1/72.27 in | 1.32835201328 | 0.351459803149 |
下面是单位锚点表,用来判断一个陌生数字来自哪一套口径,「复制对照表」按钮复制的就是这张表。
| 单位关系 | 折算结果 |
|---|---|
| 1 in | 96 px |
| 1 pt | 1.33333333333 px |
| 1 pc | 16 px |
| 1 pc | 12 pt |
| 1 pc | 4.23333333333 mm |
| 1 pc | 0.423333333333 cm |
| 1 mm | 3.779527559055118 px |
| 根字号 20 px 时 1 rem | 1.25 pc |
| 根字号 12 px 时 1 rem | 0.75 pc |
| 0.5 rem(默认字号) | 8 px = 6 pt = 2.11666666667 mm |
| 12 rem(默认字号) | 192 px = 50.8 mm |
| 传统美式派卡 | 0.166044 in = 4.2175176 mm |
| TeX 点 | 1.32835201328 px |
| 三层 1.2em 复合 | 1.728 em = 27.648 px |
| 同样三层用 rem | 1.2 rem = 19.2 px |
| em 三层 ÷ rem 三层 | 1.44 |
读法:第一张看线性放大,rem 乘 16 得像素、除以 3.779527559055118 得毫米;第二张看版本差异,4.23333333333 与 4.2175176 差的那 0.37 个百分点就是老稿件偏小的原因;第三张看锚点,其中含 20 px 与 12 px 两种根字号下的 rem 落点。
结果边界、舍入与适用说明
- 数值框为空时提示「数值不能为空,请填 0 到 100000 之间的数字」,不会拿上一次的结果冒充本次输出。
- 数值里带单位符号或千分位逗号时提示该串不是有效数字,请只填阿拉伯数字。
- 数值为负时提示长度不能为负,请填 0 或更大的数;超过 100000 时提示改小或换成英寸、厘米再填。
- 小数位留空、写成小数或超出 0 到 12 时分别给出对应提示,不自动取整也不套默认值。
- 批量行每行只认「数值 空格 单位」两段,写成 1rem 或一行两数都会指出行号和原因;单位先转小写再查表,REM、Rem、rem 等价,写成 root em 会报「单位不在八种长度单位内」。
- 结果按 12 位有效数字收敛后再按小数位显示,末尾多余的零会被去掉,4.23333333333 在小数位设 0 时显示成 4,需要精确值时请把小数位调到 6 以上。
- em 与 rem 两条因子按根字号 16 px 登记。项目里改过 html 的 font-size 时,请把实际根字号乘进来得到 px,再用 px 当源单位。
- 绝对单位换算在屏幕上依赖操作系统声明的每英寸点数,本页用的是 CSS 规范里的参考值 96,这与显示器物理像素密度无关。
- 本页只做长度换算,不涉及字体度量、行盒高度与实际渲染出来的可见尺寸。
- 页面不联网、不写本地存储,数值与批量内容只用于本次计算。
常见问题
为什么默认设置下 1 rem 正好等于 1 pc?
两边刚好都等于 16 px。派卡是六分之一英寸,96 ÷ 6 = 16 px;rem 在默认根字号 16 px 下也是 16 px。这是定义撞上的巧合,不是两者有什么依存关系。
把根字号改成 20 px 后,1 rem 还是 1 pc 吗?
不是。根字号 20 px 时 1 rem = 20 px = 1.25 pc;改成 12 px 时 1 rem = 12 px = 0.75 pc。而 1 pc 始终是 16 px,不受根字号影响。
三层 1.2em 到底会变成多大?
1.728 em,按默认根字号算是 27.648 px。因为 em 相对父元素,三层相乘得 1.2 的三次方;改用 rem 则始终是 1.2 rem = 19.2 px,两者相差 1.44 倍。
美式派卡和 CSS 里的派卡差多少?
美式派卡是 0.166044 in = 4.2175176 mm,CSS 用的 PostScript 派卡是 1/6 in = 4.23333333333 mm,前者比后者小 0.37 个百分点。TeX 点 1.32835201328 px 与 PostScript 点 1.33333333333 px 之间也是同样的 0.37 个百分点。
打印样式表里该用 rem 还是 pc?
该用绝对单位。屏幕上的 rem 绑的是根字号,打印时没有这个参照;写 @media print 时把 rem 换成 pt、pc 或 mm,纸张上的尺寸才可控。
批量框里写 2 REM 为什么能识别?
单位一栏先转成小写再查表,REM、Rem、rem 查的是同一条系数。但数值与单位之间必须留一个空格,写成 2REM 会报「每行只能写一个数值和一个单位」。
小数位怎么控制,会四舍五入吗?
「小数位」接受 0 到 12 的整数。结果本身需要的位数比设定值少时补零显示,比设定值多时按 12 位有效数字收敛后保留;末尾多余的零会被去掉,2.11666666667 在小数位设 2 时显示成 2.12。
输入的数据会上传到服务器吗?
不会。数值、单位和批量内容只在本页的 JavaScript 里参与乘除,没有发起任何网络请求,刷新页面后输入即恢复默认值。
相关工具
- em 转像素:em 折 CSS 像素,排查嵌套复合字号的第一步。
- em 转派卡:em 与派卡的直接对照,与本页共用同一张像素因子表。
- px 转 rem 转换器:给定根字号把像素设计稿换算成 rem。
- rem 转 px 转换器:本页换到像素出口的反向入口。
- CSS 格式化美化:整理样式表后再核对单位写法。
- 单位换算:查看全部单位换算工具。