rem 转 px Root em ↔ Pixels 免费 在线 安全
用 rem 写一个值，右边立刻就是 px。算术在你的浏览器里跑，什么都不往外发，而结果取决于什么，下面写着，不靠默认。
不上传任何文件
常见尺寸 — rem 转 px
| rem | px |
|---|---|
| 0.5 | 8 |
| 0.75 | 12 |
| 1 | 16 |
| 1.25 | 20 |
| 1.5 | 24 |
| 2 | 32 |
| 2.5 | 40 |
| 3 | 48 |
| 4 | 64 |
这些单位从哪里来
CSS 里的像素不是你屏幕上的像素。当显示器的像素密度不再可以预料，用真实像素度量的页面便成了屏幕越细腻、页面就越缩小的页面；于是 CSS 像素被重新定义为一个参照长度：在舒适的阅读距离上看去，约等于一英寸的九十六分之一。本页其余一切都建在这上面。em 比万维网更老——在铅字里它是一枚铸块的宽度，名字取自大写字母 M——在 CSS 中它指当前生效的字号，所以嵌套元素时它会变。rem 的加入正是为了躲开这一点：它是根元素的 em，从不叠加。vw 随响应式设计而来：视口宽度的百分之一，无论那宽度最后是多少。
你会在哪里遇到它们
这些是每一张样式表的单位。像素用来定边框、阴影，以及一切不该随之缩放的东西；rem 用来定字号、间距与布局，于是在根上改一次，整个界面随之改变；em 用来定那些应当跟随自身文字的东西，比如按钮内侧的留白；vw 用来定在任何设备上都要铺满屏幕的标题与首屏。彼此之间的换算，正是把以像素交付的设计稿变成能够伸缩的样式表时，每天都要做的算术。
常见问题
为什么 16 px 是惯常的起点？
因为那是所有主流浏览器的默认文字大小，而没有改写它的样式表会继承它。于是在默认设置下，1 rem 就等于 16 px，熟悉的换算也由此而来：0.5 rem 是 8 px，1.5 rem 是 24 px。如果用户在浏览器设置里调大了默认值，同样的 rem 数值也会随之变大——用它的意义恰恰在此。
该用 rem 还是 em？
凡应跟随整页的东西都用 rem——字号级差、间距、布局宽度——因为它自根部量起，从不累积。凡应跟随自身所在文字的东西都用 em——按钮的内侧留白、图标旁的空隙、引文的缩进。常见的错误是把以 em 定尺寸的元素层层嵌套：1.2 em 里的 1.2 em 变成 1.44，接着 1.73，直到页面底部的文字比预想的大了一倍。
结果精确吗？
两个单位若以整数互相定义，那就是精确的——本页在数字上方说明了这一点，唯一的舍入在于显示多少位。若比值没有有限小数，本页给出十二位有效数字，并说明这个关系是近似的，而不是装作不是。
我敲进去的东西会离开我的设备吗？
不会。运算在你的浏览器里进行；没有任何东西被上传，也没有接收它的服务器。页面加载一次之后，断网也照样能用。
为什么需要把 rem 换算成 px
您打开一个样式表,看到卡片上的 padding: 2.25rem 和说明文字上的 font-size: 0.8125rem。它们是很好的值,以现代 CSS 应当有的方式书写,但一眼看去什么也告诉不了您。那个卡片内边距在屏幕上有多大?说明文字可读吗?它与您拿到的设计文件里的 36 px 和 13 px 相符吗?要回答这些,您就把 rem 换算成 px:乘以根字号,并以设计工具使用的单位读出答案。这是通常方向的反面,也是您在读代码、拿设计稿对照构建结果,或向以像素思考的人解释布局时所做的事。
换算本身很简单;让它值得占一页的是基准。一个 rem 不是一个大小,而是一个大小的倍数,即根元素的字号。在没人另行说明的浏览器中,那个大小是 16 px,所以 1 rem 是 16 px,2.25 rem 是 36 px,0.8125 rem 是 13 px。但根字号可以被样式表更改,读者也可以在浏览器中更改它,然后页面里每个 rem 值都随之移动。因此页面会询问基准并使用它,而不是把它藏起来。
计算在您的浏览器中进行,不会上传任何内容。下面您会找到公式、常见值表、换算保留什么和不能保留什么、开发者需要把 rem 换算成 px 的情形,以及几个让基于 rem 的样式表易于阅读的习惯。
公式与基准
px 等于 rem 乘以基准
公式是一次乘法:px = rem × 基准。以通常的 16 px 为基准,1.5 rem 变成 24 px,0.75 rem 变成 12 px,4 rem 变成 64 px。页面在结果旁打印基准,所以像 1.5 rem = 24 px (16 px) 这样的一行,说明了它假定了什么,您可以立刻看出它是否与您的项目相符。
找出您的基准
在样式表中查找 html 或 :root 上设置 font-size 的规则。如果没有,基准就是浏览器默认的 16 px。如果有,比如 62.5%,取 16 的这个百分比:62.5% 给出 10 px。在浏览器的开发者工具中,您也可以选中根元素并读取它的计算后字号,这就是要输入基准输入框的数字。
当根字号是流式的
有些网站使用 clamp 表达式让根字号随窗口增长。这时 1 rem 根本没有单一的像素值:在手机上是 15 px,在宽显示器上是 18 px。在这种情况下,任何换算都只是一张快照。输入您在关心的宽度下看到的基准,并理解答案只在该宽度下有效。
换算保留什么、不能保留什么
它保留比例
一个 rem 就是根字号,所以用 rem 写的布局在该大小改变时保持它的形状。当您把 rem 换算成 px 时,像素值就是同一个比例在一个特定基准下的具体化。两个尺寸之间的比值,比如 2 rem 的标题对 1 rem 的正文,无论您怎么换算都不会改变,而好的布局依赖的正是这个比值。
它无法知道读者的设置
这个数完全取决于基准。如果读者调高了浏览器的默认文字大小,许多人都这样做,而且有权这样做,那么对他们来说 1 rem 就不是 16 px,您看到的数字只对输入框中的基准是对的。请把像素值当作理解设计的一种方式,而不是对每位访客所见的承诺。
取整
因为基准通常是整数,乘法的结果通常是精确的。0.8125 rem 在 16 的基准下恰好是 13 px;0.6875 rem 恰好是 11 px。如果您得到一个很长的小数,那说明这个 rem 值是由与您输入的不同的基准算出来的。
常见值
页脚的表格
页面包含一张表,列出常见 rem 数字在您所设基准下对应的像素值:0.5 rem 是 8 px,0.625 是 10,0.75 是 12,0.875 是 14,1 是 16,1.125 是 18,1.25 是 20,1.5 是 24,2 是 32,3 是 48,4 是 64。这些是在间距和字体比例中最常出现的值,烂熟于心能让您一眼读懂样式表。
用像素阅读样式表
一个有用的练习是,取一个不是您写的样式表,把它的主要值翻译成像素一次,把结果写在一条笔记里。正文大小 1 rem,标题 1.5 和 2.25 rem,容器间隔 2 rem:以像素计,是 16、24、36 和 32。这样看,设计的逻辑就显现了,您不用计算器就能把它与设计文件比较。
如何在这里把 rem 换算成 px
输入 rem 值
在第一个输入框中输入以 rem 计的尺寸。接受小数,所以 0.8125 和 1 一样可用。
设定基准
如果您的 CSS 不改变根字号,就保留 16。如果改变了,就更改它。结果会在您输入时更新。
读出像素值
答案立刻出现,旁边显示基准,所以您能看出假定了什么。把它复制到您的笔记中,或与设计文件比较。
这些单位从哪里来
CSS 像素
当显示器不再有可预测的密度时,以真实像素度量的页面,会随着屏幕越来越清晰而缩小。于是 CSS 像素被重新定义为一个参考长度:在舒适阅读距离上看到的约 1/96 英寸。因此样式表中的像素不是您屏幕上的一个点,而是浏览器映射到屏幕所需的那么多点的一个长度单位。
rem
Em 比网络更古老:在金属活字中它是一块铸块的宽度,以大写字母 M 命名,而在 CSS 中它指的是生效的字号,这就是为什么它在您嵌套元素时会变化。Rem 的加入正是为了摆脱这一点:它是根元素的 em,永不叠加。要用数字看出区别,请把 px 换算成 em,并与您把 rem 换算成 px 时得到的结果比较。
开发者何时把 rem 换算成 px
拿构建结果对照设计文件
设计师交付一份以像素计的文件;开发者用 rem 写了代码。为了检查页面是否相符,他们把 rem 换算成 px 并比较数字。不一致立刻显现:1.375 rem 是 22 px,如果设计写的是 24,就是其中之一错了。
阅读陌生的代码
当您接手一个样式表时,rem 值隐藏了真实的大小。换算其中的几个主要值,就给您一张设计的地图:字体有多大,间距有多宽,断点落在哪里。
撰写缺陷报告和文档
测试页面的人用像素描述所见。一位说内边距是 2.5 rem 的开发者,对测试人员意义不大;40 px 才有意义。换算让双方互相理解。
设定必须以像素精确的值
有些东西必须是设备像素的精确数目,否则看起来发虚:一像素的边框、画在 24 px 网格上的图标。如果某个尺寸必须落在像素网格上,把 rem 换算成 px 告诉您它在您的基准下是否如此。
把 rem 换算成 px 时的陷阱
忘了更改过的根字号
如果根被设为 62.5% 或 clamp 表达式,标准系数 16 就不适用。结果会错两个基准的比值。始终先检查基准。
混淆 rem 与 em
Em 相对于元素自己的字号,而不是根。24 px 标题内的 1.5em 值是 36 px,但在 16 px 的段落内是 24 px。本页换算 rem,它没有这样的含糊。关于 em,请见em 转 px。
假定屏幕显示相同的像素
CSS 像素不是设备像素。在高密度显示器上,一个 CSS 像素可能是两三个设备像素。换算给出的是 CSS 像素,设计工具和样式表都用它。
过早取整
如果您把 13.333 px 取整为 13 再换算回去,得到的是 0.8125 rem,而不是您开始时的 0.8333。在要紧时保留原来的 rem 值。
人们在换算之前问的问题
1 rem 是多少像素?
十六,在默认值未被更改的浏览器中。
2 rem 是多少像素?
在默认基准下是三十二。在基准为 10 时则是 20。
为什么我的浏览器显示的不一样?
读者的设置或样式表中的某条规则改变了根字号。请在开发者工具中查看根元素的计算后字号。
rem 与 em 一样吗?
不。Rem 指的是根元素,em 指的是元素本身。
我的数字会被上传吗?
不会。算术在您的浏览器中运行,没有任何东西被发送到任何地方。
我怎样换回去?
用px 转 rem,它做除法而不是乘法。
让 rem 样式表易于阅读的习惯
把像素值写在注释里
像 gap: 1.5rem; /* 24px */ 这样的一行只多几个字符,却为下一位读者省去一次换算。它还记录了您假定的基准。
使用一个小的比例尺
一个只使用少数几个 rem 值的项目,比如 0.5、1、1.5、2 和 3,很容易学会:一天之后您不用想就知道它们的像素值。当您为这样的样式表把 rem 换算成 px 时,您只是在确认自己记得的东西。
给您的值起名字
用自定义属性,比如 --space-md: 1.5rem,样式表描述的是意图而不是数字。名字承载含义,数字则放在一处。
用不同的默认大小来测试
调高浏览器中的默认文字大小并查看页面。如果它保持完整,布局就真的是用 rem 构建的。如果坏了,就是某处留在了像素里。
把 rem 换算成 px 之后好好使用像素值
比较比值,而不只是数字
当您为整个样式表把 rem 换算成 px 时,除了看尺寸本身,还要看各尺寸之间的比值。每一级大约是前一级 1.25 倍的字体比例,给出 16、20、25、31 和 39 像素;1.5 的比例给出 16、24、36 和 54。发现比值,就告诉您设计师的意图,并让您在需要新尺寸时一致地扩展比例尺。
为以像素思考的人翻译
并非团队里的每个人都读 rem。项目经理、文案和客户常常从截图出发,要求把标题放大一点。如果您能说标题现在是 36 px,在 2.5 rem 时会是 40 px,对话就很短。本页是这两套词汇之间的快速桥梁。
检查触摸目标和最小尺寸
触屏指南要求目标至少约 44 px,文字指南要求正文约 16 px 或更大。两者都以像素表述。要对照它们验证用 rem 写的样式表,请把 rem 换算成 px,看按钮和文字是否越过这条线。
留意缩放的情形
您得到的值对应您输入的基准。如果您的读者可能放大文字,请用 20 或 24 的基准再试一次换算,看看布局对屏幕提出什么要求。在 16 时舒适的卡片在 24 时可能溢出,而发现这一点的最佳时机是在页面发布之前。
相关换算器
同一系列的工具涵盖相邻的换算。要换回 rem,请使用px 转 rem。对于相对于元素的尺寸,有px 转 em和em 转 px,对于相对于屏幕的尺寸,有px 转 vw和vw 转 px。对于同一样式表中的颜色,HEX 转 RGB和HSL 转 HEX就在手边,对于类名,文本转 kebab-case把一个短语变成 CSS 接受的名字。
一个演算示例
假设您在审查一个拉取请求,样式表里有一个主视觉区块,padding: 5rem 1.5rem,标题 3.5rem,导语段落 1.25rem。设计文件写的是 80 px 和 24 px 的内边距、56 px 的标题和 20 px 的导语。您输入 5 并读到 80 px,输入 1.5 并读到 24,输入 3.5 并读到 56,输入 1.25 并读到 20。四个都吻合,所以构建结果忠实。如果标题是 3.25 rem,您会读到 52,并在它到达设计师之前发现差异。
一份简短的清单
换算之前
找出基准:样式表中的根规则,或开发者工具中的计算后大小。
换算之时
输入 rem 值,检查结果旁显示的基准,并记下像素数字。
换算之后
与设计文件比较。如果数字不同,在怀疑代码之前先检查基准。
常见错误
不检查就用 16
它是默认值,不是规则。请检查根。
把像素当作最终结果
答案只对一个基准成立。默认值较大的读者会看到更大的像素。
混淆 rem 与 em
它们看起来相像,行为不同。每个请用对应的页面。
您的数字留在您的设备上
计算在本地进行。您的值由您自己的浏览器使用,没有任何东西被发送到任何地方。事后没有什么需要删除,也没有账户需要创建。这就是把 rem 换算成 px 的朴素方式。
总结
要在这里把 rem 换算成 px,输入以 rem 计的尺寸,按公式 px = rem × 基准立刻读到以像素计的结果。基准从浏览器默认的 16 px 开始,您可以更改它以匹配您的 CSS。换算保留比例,因为一个 rem 就是根字号,而它无法知道读者的设置,所以数字只对输入框中的基准成立。常见值表,从 0.5 rem 的 8 px 到 4 rem 的 64 px,帮助您一眼读懂样式表。不上传任何内容。