px 转 em Pixels ↔ Em 免费 在线 安全

为什么要把 px 换算成 em

Em 是 CSS 中最古老的相对单位,也是引起争论最多的一个。您从设计文件里拿到一个以像素计的尺寸,按钮上 20 px 的内边距、图标旁 14 px 的间隔、标题的 36 px,而您想把它写成 em,好让它跟随它所属的文字。当您把 px 换算成 em 时,您是在问一个特定的问题:这是当前字号的几倍?答案取决于页面猜不到的一个数,即该值被使用之处所生效的字号,所以换算器把这个数放进一个输入框,并公开地使用它。

用 em 来写尺寸的理由是:属于文字的东西应当随文字一起增长。按钮内部的内边距,应当在按钮的标签变大时也变大。图标与其说明文字之间的间隔,应当在说明文字变宽时变宽。标题的下外边距应当与标题保持比例。在所有这些情形下,一旦字号改变,像素值就错了,而 em 值在任何字号下都是对的。这就是用 em 的全部理由,而且是一个有力的理由。

计算在您的浏览器中进行,不会上传任何内容。下面您会找到公式、em 比 rem 需要更多小心的原因、产生出人意料尺寸的嵌套陷阱、em 是正确单位的场合,以及在真实样式表中选择 em 还是 rem 的方法。

公式与基准

em 等于 px 除以字号

公式是一次除法:em = px ÷ 基准。基准为 16 px 时,24 px 变成 1.5 em,8 px 变成 0.5 em,20 px 变成 1.25 em。页面在结果旁显示基准,如 24 px = 1.5 em (16 px),让您看到假定了什么。算术与 rem 相同。含义不同。

基准是什么

对 rem 来说,基准是根元素的字号。对 em 来说,它是使用该值的元素的字号,或者,对于 font-size 属性本身,是父元素的字号。这就是 em 没有唯一答案的原因:同一个样式表的值在不同地方意味着不同的像素尺寸。如果您在为文字是 14 px 的按钮换算内边距,就把 14 作为基准输入。如果您在为 32 px 的标题换算外边距,就输入 32。

不知道时的默认值

如果您只想要一个粗略的数字,就让基准保持 16,这是没人改动过的浏览器中普通文字的大小。结果对一块普通正文是对的,即使该元素最终有不同的大小,它也能给您比例的感觉。

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

它保留与文字的比例

结果是相对于使用该值之处所生效字号的比例。用 em 书写的间距会随旁边的文字增长和缩小,而这正是文字周围的间距应有的行为。

它不能给您整个页面的一个数

这一点需要小心。Em 相对于元素自身的字号,或者对 font-size 来说相对于其父元素的字号,而不是相对于根。所以对一个页面没有单一的答案:同样的 1.5 em,在 16 px 的元素内是 24 px,在 24 px 的元素内是 36 px,而 em 套 em 会相乘。页面上的数字只对输入框中的基准成立,别无其他。如果您想要一个处处成立的数,那正是 rem 的用途。要比较,请把 px 换算成 rem,看看同样的像素值如何表现。

取整

除以 16 对许多尺寸给出整齐的值,对另一些给出循环小数。像 0.8125 em 这样的值放在样式表里没问题,但如果精确大小不重要,您可能更愿意取整为 0.8 或 0.85。在精度要紧的地方保留完整的数字。

嵌套陷阱

em 如何叠加

假设一个列表有 font-size: 0.875em,它的各项也有 font-size: 0.875em。列表是其父元素的 87.5%。每一项是列表的 87.5%,即父元素的约 76.6%。嵌套在某一项里的列表再次缩小,到约 67%。三层之后文字就非常小了,而没有人是故意这样写的。这就是说 em 会叠加的含义。

为什么在您把 px 换算成 em 时这很重要

如果您为 font-size 把像素值换算成 em,您必须使用的基准是父元素的字号,而不是元素自己的。许多错误来自用错了基准。对于其他属性,如 padding 和 margin,基准是元素自己的字号。这条规则容易说也容易忘:font-size 向上看,其他一切看自己。

如何避免意外

对跟随文字的间距用 em,对字号用 rem。这样字号永远不会叠加,因为它们指向根,而间距仍跟随自己的文字。这是大多数现代样式表最终采用的组合。

常见尺寸

页脚的表格

换算器下方有一张按您设定的基准列出的常见尺寸表:8 px 是 0.5 em,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。基准为 16 时,这些数字与 rem 相同,这就是人们把两者混淆的原因。区别在于 16 代表什么。

改变基准以匹配元素

如果您为一个小按钮把基准设为 14,表格就变了:14 px 现在是 1 em,7 px 是 0.5 em,21 px 是 1.5 em。试一试,您会看到 1.5 em 的内边距在 14 px 的按钮里与在 18 px 的按钮里像素大小不同,以及为什么这很有用。

如何在这里把 px 换算成 em

输入像素值

在第一个输入框中输入以像素计的尺寸。接受小数。

设定 em 所指的字号

输入元素的字号,如果您在换算 font-size,则输入其父元素的字号。如果不确定,就保留 16,并把结果当作近似值。

复制 em 值

在您的 CSS 中使用带单位的数字,如 padding: 1.25em。不带单位的数字对大多数属性是无效的。

这些单位从哪里来

金属活字中的 em

Em 比网络更古老。在金属活字中,它是一块铸块的宽度,以大写字母 M 命名,是印刷行中水平空间的自然单位。排印师至今仍谈论 em 破折号和 em 空格。在 CSS 中,这个想法以更宽松的形式留存:一 em 是当前字体的大小。

像素与 rem

CSS 像素是在舒适阅读距离上看到的约 1/96 英寸的参考长度,而不是您屏幕上的一个点。Rem 的加入是为了给开发者一个相对但永不叠加的单位:它就是根元素的 em。像素、em 和 rem 三者合起来涵盖三种需求:固定尺寸、相对于文字的尺寸,以及相对于页面的尺寸。

em 是正确选择的场合

按钮和表单字段内部的内边距

带 padding: 0.5em 1em 的按钮在任何文字大小下比例看起来都一样。把标签变大,整个按钮随之增长,这正是您对一个可能用在工具栏和主横幅里的组件所希望的。

图标旁的间距

后面跟着说明文字的图标,需要一个随说明文字缩放的间隔。0.4em 的外边距能做到这一点;6px 的外边距做不到。

标题和段落周围的外边距

当段落间距用 em 时,文档中的垂直节奏更容易保持,因为它跟随段落的大小。标题以 em 计的外边距,在标题于不同断点改变大小时保持比例。

媒体查询

以 em 书写的断点会响应读者的文字大小,所以放大了文字的人,布局会更早切换到窄版形式。在媒体查询中,em 指的是浏览器默认值而不是任何元素,所以它不会叠加。

把 px 换算成 em 时的陷阱

用错基准

最常见的错误。对 font-size,用父元素的大小;对其他一切,用元素自己的。在输入基准之前,请检查您在换算哪个属性。

忘了父元素可能也用 em

如果父元素的字号本身是 em,您必须沿着链条向上追溯才能知道真实大小。当样式表变得复杂时,把字号改成 rem,而把 em 留给间距。

期待整个组件有一个数

包含不同大小文字的组件,其各部分没有单一的 em 值。请对每个部分按其自己的基准换算。

对同一个属性混用 em 和 rem

1rem 的内边距挨着 1em 的外边距是合法的,而且常常令人困惑。选定一条规则,比如字号用 rem、间距用 em,并坚持它。

人们在换算之前问的问题

16 px 是多少 em?

一,如果生效的字号是 16 px。如果元素的字号是 20 px,那么 16 px 是 0.8 em。

em 比 rem 好吗?

都不比对方好。Rem 更适合字号和全局布局。Em 更适合应当跟随自己文字的间距。

为什么我的内边距比预期的大?

因为它相对于元素的字号,而该字号可能比您假定的更大。请在浏览器的开发者工具中检查计算后的字号。

我可以使用小数吗?

可以。像 0.625em 和 1.333em 这样的值很正常。

我的数字会被上传吗?

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

我怎样换回去?

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

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

决定这个值属于什么

如果它属于文字,em 就是对的。如果它属于页面,比如列宽或区块间距,rem 或视口单位更合适。px 转 vw把一个尺寸表示成屏幕宽度的份额。

在注释里写下意图

像 padding: 0.75em 1.25em; /* 12px 20px at 16px */ 这样的一行,让推理可见。当字号以后改变时,您会知道这些数字原本的用意。

把组件的字号放在一处

在组件的根元素上设置字号,让里面的一切都指向它。这样,里面的 em 值在组件的任何地方含义都相同,您可以对着单一的基准把 px 换算成 em。

把 px 换算成 em 时的好习惯

一次换算一个组件的 px 到 em

不要试图一口气为整个样式表把 px 换算成 em。取一个单独的组件,比如卡片或按钮,确定它的字号,并对着该字号换算它的每个间距值。组件完成后,在两三种文字大小下测试它。然后再转到下一个。

用计算器处理零碎的值,而不是整的

像 8、16 和 24 像素这样的值,在基准为 16 时换算成整齐的 em 数。像 22 或 13 这样零碎的值给出很长的小数。当您为这些把 px 换算成 em 时,请决定设计是否真的需要精确的数字,还是最接近的整 em 值同样好。设计师常常乐意取整,而整洁的样式表更易维护。

记录下基准

每个 em 值旁边的一条简短注释,说明基准是什么,会帮助下一个人。如果有人以后改变了组件的字号,他们会知道间距跟随它是设计使然,而不是偶然。把这一点写下来一次,花的时间是值得的。

与 rem 的等价值比较

如果您不确定 em 还是 rem 适合某个值,就把 px 换算成 em 和 rem,并问问当文字大小改变时应当发生什么。如果该值应当跟随元素自己的文字,取 em。如果应当跟随页面,取 rem。

相关换算器

同一系列的工具涵盖相邻的换算。要换回像素,请使用把 em 换算成 px。对于相对于根的尺寸,有把 px 换算成 rem和把 rem 换算成 px,对于相对于屏幕的尺寸,有把 px 换算成 vw和把 vw 换算成 px。对于同一样式表的颜色,HEX 转 RGB和HEX 转 HSL处理这些记法。

一个演算示例

假设按钮标签是 14 px,设计给按钮 10 px 的垂直内边距和 20 px 的水平内边距。您输入 14 作为基准,输入 10 并读到 0.714 em,输入 20 并读到 1.429 em。在样式表中您写 padding: 0.714em 1.429em。当同一个按钮用在标签为 18 px 的主横幅中时,内边距变成 12.9 px 和 25.7 px,保持比例。如果您写的是 10px 和 20px,按钮在较大的文字周围就会显得单薄。

一份简短的清单

换算之前

确定这个值属于哪个属性,并找出它应当相对于的字号。

换算之时

输入像素值和正确的基准,并复制带单位的 em 数字。

换算之后

在浏览器中改变组件的字号,检查间距是否跟随。留意叠加的嵌套 em 值。

常见错误

用根的大小作为内边距的基准

那是 rem 的工作。Em 指的是元素自己的字号。

对每个字号都用 em

嵌套的 em 字号会叠加并让您大吃一惊。字号请用 rem。

取整成视觉上整齐但错误的数

当乘以一个大字号时,1.43 与 1.5 并不相同。请保留足够的位数。

您的数字留在您的设备上

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

总结

要在这里把 px 换算成 em,输入以像素计的尺寸和它所相对的字号,按公式 em = px ÷ 基准立刻读出结果。换算保留相对于使用该值之处所生效字号的比例。它不能给一个页面单一的答案:em 相对于元素自己的字号,或对 font-size 来说相对于父元素的,所以同样的 1.5 em 在 16 px 的元素内是 24 px,在 24 px 的元素内是 36 px,而 em 套 em 会相乘。要一个处处成立的数,请用 rem。不上传任何内容。