rem 转派卡换算器

CSS 的绝对锚点是 1 in = 96 px,派卡等于六分之一英寸也就是 16 px;而 rem 在浏览器默认根字号 16 px 下也正好是 16 px,于是在默认设置里 1 rem 恰好等于 1 pc。本页以 CSS 像素为唯一中间基准,把像素、磅、派卡、em、rem、英寸、厘米、毫米八种单位串成一张互转表,支持大小写不敏感的批量输入。

默认根字号 16 px 下 1 rem = 1 pc = 16 px:pc = 1/6 in = 96/6 = 16 px,rem 也等于 16 px,两者恰好撞上。
1 rem = 1 pc 折合 px:16 px 单位汇率:1 rem = 1 pc 口径说明:本页按根字号 16 px 计,1 rem = 16 px = 1 pc;pc 是绝对单位,不随根字号改变 -- 展开到八个单位 -- 16 px 12 pt 1 pc 1 em 1 rem 0.166666666667 in 0.423333333333 cm 4.23333333333 mm -- 批量(目标单位 pc)-- 1 rem = 1 pc 2 REM = 2 pc 0.75 rem = 0.75 pc 12 rem = 12 pc 16 px = 1 pc

默认示例:1 rem 换成派卡。换算按根字号 16 px 计算,改过 html 的 font-size 时请把「根字号」手算进来,用 px 或 pc 当源单位更稳妥。

使用方法

  1. 「数值」默认 1,范围 0 到 100000,支持小数;「源单位」默认 rem,「目标单位」默认派卡。改动任意一项立刻重算,光标停在数值框里按回车同样触发。
  2. 两个单位下拉各有八个选项:像素、磅、派卡、em、rem、英寸、厘米、毫米,全部以 CSS 像素为唯一中间基准;任选两个组合都能算,反过来把派卡换成 rem 也成立。
  3. 「小数位」默认 6,范围 0 到 12。派卡与毫米之间要过 3.779527559055118 这条因子,几乎必然出小数,位数给少了看不出 4.23333333333 mm 与六分之一英寸是同一件事。
  4. 「批量换算」默认已经写好五行示例,每行一条「数值 + 空格 + 单位」。单位一栏大小写不敏感,REM 与 rem 查的是同一条系数;按 Ctrl+Enter(Mac 上 Cmd+Enter)一次算完,框被清空时点「换算」会自动填回示例。
  5. 结果区从上到下依次是主等式、折合像素数、单位汇率、口径说明、八个单位的展开清单和批量结果,用来核对数量级有没有错位。
  6. 清单下面是一张 24 行阶梯表,把当前数值乘 0.25 到 500 逐档换算,默认显示 12 行,点「加载更多」展开全部,点「导出 CSV」存成带字节序标记的文件。
  7. 「交换单位」把源与目标对调,用来反着核一遍;「复制结果」复制整段结论;「复制对照表」复制正文那张单位锚点表,制表符分隔,可直接粘进表格软件。
  8. 数值为空、为负、超上限、不是数字,小数位不是 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)定义来源
像素 px1CSS 参考像素,基准单位
磅 pt1.3333333333333333PostScript 点,96 ÷ 72
派卡 pc1612 pt,即 96 ÷ 6
em16相对父字号,本页按 16 px 计
rem16相对根字号,本页按 16 px 计
英寸 in96CSS 绝对锚点
厘米 cm37.7952755905511896 ÷ 2.54
毫米 mm3.77952755905511896 ÷ 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。

rempxptpcmm
0.5860.52.11666666667
0.751290.753.175
1161214.23333333333
1.524181.56.35
2322428.46666666667
34836312.7
46448416.9333333333
69672625.4
812896833.8666666667
121921441250.8

第二张表把派卡与点的两个版本并排放在一起。差量都是 0.37 个百分点,量上看不大,累积到整页行距上就能看出偏向。

单位版本定义折算 px折算 mm
PostScript 派卡(CSS 用)1/6 in164.23333333333
传统美式派卡0.166044 in15.9402244.2175176
PostScript 点(CSS 用)1/72 in1.333333333330.352777777778
TeX 点1/72.27 in1.328352013280.351459803149

下面是单位锚点表,用来判断一个陌生数字来自哪一套口径,「复制对照表」按钮复制的就是这张表。

单位关系折算结果
1 in96 px
1 pt1.33333333333 px
1 pc16 px
1 pc12 pt
1 pc4.23333333333 mm
1 pc0.423333333333 cm
1 mm3.779527559055118 px
根字号 20 px 时 1 rem1.25 pc
根字号 12 px 时 1 rem0.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
同样三层用 rem1.2 rem = 19.2 px
em 三层 ÷ rem 三层1.44

读法:第一张看线性放大,rem 乘 16 得像素、除以 3.779527559055118 得毫米;第二张看版本差异,4.23333333333 与 4.2175176 差的那 0.37 个百分点就是老稿件偏小的原因;第三张看锚点,其中含 20 px 与 12 px 两种根字号下的 rem 落点。

结果边界、舍入与适用说明

常见问题

为什么默认设置下 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 里参与乘除,没有发起任何网络请求,刷新页面后输入即恢复默认值。

相关工具