px 转 rem Pixels ↔ Root em 免费 在线 安全

为什么设计师和开发者要把 px 换算成 rem

设计工具用像素说话。一份设计稿说标题是 32 px,各区块之间的间隔是 48 px,按钮有 16 px 的内边距。写得好的样式表则用 rem 说话。这两种语言之间的空隙就是本页所处的位置:您输入以像素计的尺寸,读到以 rem 计的结果,这样您放进 CSS 里的数字才表达设计师的本意。把 px 换算成 rem 是一件小事,但在一个网站的生命周期里要做数百次,而一个错误的基准会让一个精心设计的布局到处同时变得略微不对。

要费心用 rem 的理由是无障碍和灵活性。一个 rem 是根字号的倍数,浏览器除非被告知,否则把它设为 16 px,而读者可以在设置中自由更改它。因此,当视力不好的人调高默认文字大小时,用 rem 写的布局保持它的形状:文字、间距和方框一起增长。用像素写的布局不会跟随,要求更大文字的读者得到的是挤在狭小方框里的更大字母,或者什么也得不到。这就是为什么几乎每一份现代样式指南都说同样的话:字体和间距用 rem。

本页在您的浏览器中进行算术。不会上传任何内容,换算所依赖的东西,即基准大小,在下面写明,并放在一个您可以更改的输入框里,而不是在您背后被默默假定。下面您会找到公式、常见尺寸表、基准为什么重要的原因、让匆忙把 px 换算成 rem 的人栽跟头的陷阱,以及在真实样式表中使用结果的简短指南。

公式与基准

rem 等于 px 除以基准

公式是一次除法:rem = px ÷ 基准。以通常的 16 px 为基准,24 px 的尺寸变成 1.5 rem,32 px 变成 2 rem,8 px 变成 0.5 rem。页面在您输入时显示结果,并显示它所用的基准,所以 24 px = 1.5 rem (16 px) 这一行准确地告诉您假定了什么。

16 从哪里来

基准从 16 px 开始,因为没人另行说明时浏览器就用这个值。它不是网络的法则;它是默认值的默认值,几十年来一直稳定。如果您的 CSS 从不触动根字号,那么对大多数访客来说 1 rem 就是 16 px。如果触动了,基准就是您设定的值。

62.5% 技巧及人们为什么用它

有些样式表把根字号设为 62.5%,这使得在默认浏览器上 1 rem 等于 10 px,于是 24 px 就是简单的 2.4 rem,算术在脑子里就容易做。它管用,但有代价:整个页面现在都依赖那个百分比,任何期望以 16 为基准的组件都会显得太小。如果您的项目这样做,请在本页的基准输入框中输入 10,每个数字就会与您的 CSS 一致。

换算保留什么、不能保留什么

它保留比例

一个 rem 就是根字号,所以用 rem 写的布局在该大小改变时保持它的形状。这就是那样写的全部理由。当您把 px 换算成 rem 时,您得到的数字,就是像素值在您所选基准下的同一比例,现在以一种可缩放的方式表达。

它无法知道读者的设置

这个数完全取决于基准。如果您的 CSS 在根元素上设置了不同的大小,或者读者在浏览器中更改了默认文字大小,许多人都这样做,而且有权这样做,那么对他们来说 1 rem 就不是 16 px。页面上的数字只对输入框中的基准是对的。这不是工具的缺陷,而是这个单位的本性:它是相对的,而相对单位没有可供换算的固定值。

取整

除以 16 对许多常见尺寸(16、24、32、48、64)给出整齐的结果,对另一些给出循环小数(10 px 是 0.625 rem;13 px 是 0.8125)。页面给出数字所需的位数,由您决定在样式表中保留几位。浏览器处理长小数毫无困难,但像 0.8125rem 这样取整后的值,比有十位数字的值更易阅读和维护。

常见尺寸

页脚的表格

换算器下方有一张常见尺寸表:8 px 是 0.5 rem,10 px 是 0.625,12 px 是 0.75,14 px 是 0.875,16 px 是 1,18 px 是 1.125,20 px 是 1.25,24 px 是 1.5,32 px 是 2,48 px 是 3,64 px 是 4。这些是字体比例和间距系统中最常出现的尺寸,把它们摆在面前能省去一次换算。

建立在 rem 之上的比例

一个有用的习惯是选一小组 rem 值并重复使用:间距用 0.5、1、1.5、2、3 和 4,字体用 0.875、1、1.25、1.5、2。设计师称之为比例尺,它让网站在视觉上保持一致。当设计稿给您一个零碎的值如 22 px 时,用换算器看出它是 1.375 rem,然后决定是否取整到您比例尺上最接近的值。

如何在这里把 px 换算成 rem

输入像素值

在第一个输入框中输入以像素计的尺寸。接受小数,所以 13.5 px 和 14 一样可用。

检查基准

如果您的 CSS 不改变根字号,就保留 16。如果改变了,就更改它。结果会在您输入时更新。

复制 rem 值

读出数字并在您的 CSS 中使用,单位写在后面:font-size: 1.5rem。别忘了单位,因为在大多数属性中,一个光秃秃的数字意味着别的东西。

这些单位从哪里来

CSS 像素不是您屏幕的像素

当显示器不再有可预测的密度时,以真实像素度量的页面,会随着屏幕越来越清晰而缩小。于是 CSS 像素被重新定义为一个参考长度:在舒适阅读距离上看到的约 1/96 英寸。本页的其他一切都建立在此之上。Em 比网络更古老:在金属活字中它是一块铸块的宽度,以大写字母 M 命名,而在 CSS 中它指的是生效的字号,这就是为什么它在您嵌套元素时会变化。Rem 的加入正是为了摆脱这一点:它是根元素的 em,永不叠加。

为什么有 rem

在 rem 之前,开发者用 em 或百分比来设定一切的大小,嵌套的元素会互相相乘:列表里的列表里的列表,每深一层就缩小或增大。Rem 给了他们一个固定的参照,即根,并消除了叠加。如果您想比较两者,请把 px 换算成 em,看看同样的像素值如何取决于它所处的元素。

您在实践中何处遇到 rem

字体

正文通常是 1 rem,标题 1.25 到 3 rem,小字 0.75 到 0.875 rem。用 rem 书写它们,让读者通过更改一个浏览器设置就能放大整个页面。

间距与布局

以 rem 计的外边距、内边距和间隔让空白与文字保持比例。当文字增大时,周围的空间也增大,布局保持平衡,而不是把更大的字母塞进旧的方框里。

媒体查询

以 em 或 rem 书写的断点会响应读者的文字大小,所以放大了文字的人,布局会更早切换到窄版形式。这是一个值得了解的改进,尽管断点中仍常用像素。

该留在像素里的东西

细线边框、方框阴影和细小图标常常在固定的像素大小下最好看,因为 0.0625rem 的边框在大文字下增长到 0.1rem,对谁都没有帮助。该缩放的用 rem,不该缩放的用像素。

把 px 换算成 rem 时的陷阱

忘了基准并不总是 16

如果一个项目设置了 html { font-size: 62.5% },或使用流式的根字号,系数就不同。在信任任何换算器的数字之前,包括这一个,请检查样式表。

换算根字号本身

如果您以像素设置根字号,读者的浏览器设置就被覆盖,rem 的好处就丢了。把根字号设为百分比,或者别管它,这样用户的偏好才会得到尊重。

在自己设定字号的组件内使用 rem

Rem 始终指向根,而不是组件。字号为 14 px、内边距为 1rem 的按钮,其内边距不跟随按钮自己的文字。如果您想要跟随元素文字的间距,那是 em 的工作。

没有计划地混用单位

一个样式表一个外边距用 px、下一个用 rem、第三个用 em,难以推理。选定一条规则:字体和间距用 rem,边框和阴影用像素,并坚持它。

人们在换算之前问的问题

16 px 是多少 rem?

一,在默认浏览器上。十六除以十六的基准。

rem 比 px 好吗?

对字体和间距来说,在大多数项目中它是更好的选择,因为它尊重读者的设置。对于不该缩放的东西,像素仍然是对的。

为什么我的结果与另一个网站不同?

很可能是基准不同。请检查输入框:有些工具假定 10,有些 16,有些 14。本页在结果旁显示基准。

我必须取整吗?

不必。浏览器接受长小数。只为可读性而取整。

我的数字会被上传吗?

不会。算术在您的浏览器中运行,没有任何东西被发送到任何地方。

我怎样换回去?

用把 rem 换算成 px,它做乘法而不是除法。

在把 px 换算成 rem 时明智地选择

为项目定一个基准并坚持它

无论您选什么,让它成为一个决定,并写进项目的文档。对基准有分歧的团队,会做出拼不到一起的组件。

在设计阶段换算,而不是最后一刻

如果您在阅读设计稿时就把 px 换算成 rem,您就把比例尺建进了设计,并及早注意到零碎的值。如果您在最后才做,您会发现它们是一堆不一致的数字。

也考虑视口单位

对必须撑满屏幕的标题,px 转 vw把一个尺寸表示成视口的份额。它的缩放方式与 rem 不同,两者常常结合使用。

让把 px 换算成 rem 更容易的习惯

在脑子里记一张换算表

以 16 为基准,几个锚点就涵盖了大部分工作:4 px 是 0.25 rem,8 px 是 0.5,12 px 是 0.75,16 px 是 1,24 px 是 1.5,32 px 是 2。当设计稿给您一个介于它们之间的值时,您可以在页面上把 px 换算成 rem 之前先估算,只用换算器来确认。几个星期之后,您不用看就知道这张表。

让设计系统去做

如果您的团队保存设计令牌,比如 spacing-2 或 font-lg,就一次性用 rem 存好,让每个人都引用名称。这样没有人需要再把 px 换算成 rem,对比例尺的更改只在一处进行。换算器是您在编写令牌时用的工具,而不是在使用它们时。

把像素值写在注释里

像 padding: 1.25rem; /* 20px */ 这样的一行只多几个字符,却能让下一个开发者不必去拿计算器。它还记录了您假定的基准,如果根字号以后被更改,这会有帮助。

改变浏览器设置来测试

一个页面是用 rem 构建的证明,是它能经受住更大的默认文字大小。在浏览器中更改设置,重新加载并观察。出问题的组件,就是某处留在了像素里,或固定高度把文字截断的那些。

相关换算器

同一系列的工具涵盖相邻的换算。要换回像素,请使用把 rem 换算成 px。对于相对于元素的尺寸,有把 px 换算成 em和把 em 换算成 px,对于相对于屏幕的尺寸,有把 px 换算成 vw和把 vw 换算成 px。如果您的工作除了尺寸还包括颜色,HEX 转 RGB、RGB 转 HEX和HEX 转 HSL处理样式表的记法。

一个演算示例

假设设计稿给出卡片标题 28 px,卡片内边距 20 px,卡片之间的间隔 12 px,而您的项目使用默认的 16 px 基准。您输入 28 并读到 1.75 rem,输入 20 并读到 1.25 rem,输入 12 并读到 0.75 rem。在样式表中您写 font-size: 1.75rem、padding: 1.25rem 和 gap: 0.75rem。把浏览器文字大小调到 20 px 的访客,看到的是同一张卡片,放大了四分之一:标题是 35 px,内边距 25 px,间隔 15 px,全都保持比例。如果您写的是像素,标题会停留在 28,卡片看起来就不对了。

一份简短的清单

换算之前

弄清您的 CSS 使用的基准。决定哪些尺寸应当缩放,哪些不应当。

换算之时

输入像素值,检查结果旁显示的基准,并复制带单位的 rem 数字。

换算之后

在浏览器中用更大的默认文字大小测试页面,查看不再装得下文字的方框。

常见错误

假定 1 rem 总是 16 px

只有在没人改过根字号时才是,而有些读者改过。把布局写成在其他大小下也能工作。

以像素设置根字号

它覆盖了读者的选择。请使用百分比,或者不要设置。

什么都换算

并非每个尺寸都应缩放。边框和阴影请留在像素里。

您的数字留在您的设备上

计算在本地进行。您的值由您自己的浏览器使用,没有任何东西被发送到任何地方。事后没有什么需要删除,也没有账户需要创建。这就是把 px 换算成 rem 的朴素方式。

总结

要在这里把 px 换算成 rem,输入以像素计的尺寸,按公式 rem = px ÷ 基准立刻读到以 rem 计的结果。基准从浏览器默认的 16 px 开始,您可以更改它以匹配您的 CSS。换算保留比例:用 rem 写的布局在根字号改变时保持它的形状。它无法知道读者的设置,所以数字只对输入框中的基准成立。换算器下方表格中的常见尺寸,从 8 px 的 0.5 rem 到 64 px 的 4 rem,让您不必重复算术。不上传任何内容。