em 转 px Em ↔ Pixels 免费 在线 安全
用 em 写一个值，右边立刻就是 px。算术在你的浏览器里跑，什么都不往外发，而结果取决于什么，下面写着，不靠默认。
不上传任何文件
常见尺寸 — em 转 px
| em | 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，直到页面底部的文字比预想的大了一倍。
结果精确吗？
两个单位若以整数互相定义，那就是精确的——本页在数字上方说明了这一点，唯一的舍入在于显示多少位。若比值没有有限小数，本页给出十二位有效数字，并说明这个关系是近似的，而不是装作不是。
我敲进去的东西会离开我的设备吗？
不会。运算在你的浏览器里进行；没有任何东西被上传，也没有接收它的服务器。页面加载一次之后，断网也照样能用。
为什么要把 em 换算成 px
样式表在一个标题上写 margin-bottom: 0.75em,在一个按钮上写 padding: 0.4em 0.9em,在一段文字上写 1.3em 的行高。这些都是好用而灵活的值,却几乎无法想象。那个外边距是多少像素?按钮的内边距与设计文件里的 6 px 和 14 px 吻合吗?要弄清楚,您得把 em 换算成 px:乘以 em 所指的字体大小,然后以设计工具使用的单位读出答案。这是开发者在审查代码、对照设计稿检查构建、调试间距问题,或把完成的组件交给以像素思考的人时会问的问题。
em 是 CSS 中最难换算的单位,因为它没有固定的值。em 是使用该值之处有效的字体大小,或者对于 font-size 属性本身,是父元素的字体大小。所以 1.5 em 在一个地方可能是 24 px,在另一个地方是 36 px,在同一份样式表里,出自同一条规则。因此换算器不做猜测。它询问 em 所指的字体大小,把它显示在答案旁边,并用它来计算。如果您不知道这个大小,下面各节会说明如何在您的浏览器里找到它。
计算在您的浏览器中进行,不会上传任何东西。下面您会看到公式、如何找到正确的基准、换算保留什么而不能保留什么、嵌套的 em 值如何相乘、开发者何时需要把 em 换算成 px,以及几个让基于 em 的样式表保持易懂的习惯。
公式与基准
px 等于 em 乘以字体大小
公式是一次乘法:px = em × 基准。以 16 px 为基准,1.5 em 变为 24 px,0.75 em 变为 12 px,2 em 变为 32 px。本页在结果旁边印出基准,所以像 1.5 em = 24 px (16 px) 这样的一行,说明了确切假定了什么。如果元素的字体大小是 20 px,请输入 20,1.5 em 就变为 30 px。
在您的浏览器中找到基准
打开开发者工具,选中元素,查看它的计算后字体大小。对于 font-size 以外的任何属性,这就是要在基准栏中输入的数字。对于 font-size 本身,则选中父元素并读取它的计算后大小。这只需几秒钟,并完全消除了猜测。
当您看不到页面时
如果您是在没有页面的情况下读代码,请从元素向上沿着字体大小的链条追溯:它自己的 font-size(如果有),否则是它父元素的,依此类推直到根,除非样式表或读者改过,否则根是 16 px。凡是以 em 给出大小的地方,沿着链条相乘。这很繁琐,这就是为什么大多数团队选定用 rem 表示字体大小。
换算保留什么,不能保留什么
它保留与文字的比例
结果是在您输入的基准下 em 所代表的像素大小。以 em 书写时,间距或尺寸跟随它所属的文字,而换算显示了对于某一特定大小的文字,这相当于多少。
它不能给出整个页面的唯一答案
这一点要小心:em 是相对于元素自身的字体大小,或者对 font-size 而言是相对于其父元素的,而不是相对于根。所以同样的 1.5 em 在 16 px 的元素里是 24 px,在 24 px 的元素里是 36 px,而 em 套 em 会相乘。页面上的数字只对栏里的基准是对的,对其他一切都不对。如果您想要一个处处成立的数字,rem 就是为此而生。要比较两者,请把 rem 换算成 px,看看相对于根的单位如何保持固定。
取整
乘以整数基准,对大多数值给出精确的结果。如果基准是小数,例如 13.5 px,像 1.2 em 这样的值给出 16.2 px。浏览器能处理小数像素,但当您需要整像素时,例如细线边框或网格上的图标,请有意识地取整,并检查它的外观。
嵌套的 em 值如何相乘
列表里的列表
设想一个正文为 16 px 的页面。一个列表有 font-size: 0.875em,即 14 px。其中的列表项也有 font-size: 0.875em,即 14 × 0.875 = 12.25 px。列表项里的一个列表又来一次:10.7 px。嵌套三层,文字就很小了,而没有人决定让它如此。当您为一个组件把 em 换算成 px 而答案显得太小时,首先要检查嵌套。
沿着链条向上走
要知道嵌套 em 的真实像素大小,请沿途向下把基准乘以每个值:16 × 0.875 × 0.875 = 12.25。换算器一次做一步。对于一条链条,请换算第一个值,把答案用作第二个的基准,然后继续。这与浏览器执行的算术相同。
如何阻止它层层叠加
字体大小使用 rem,让每个大小都指向根,而 em 保留给间距,让内边距和外边距跟随各自元素的文字。在这种组合下,没有任何东西会叠加,而您换算的 em 值总是相对于您能立即读出的字体大小。
常用值
页面底部的表
本页包含一张表,列出常见的 em 数字在您设定的基准下所对应的像素值:0.5 em 是 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。在默认基准下,这些数字与 rem 的相同。改变基准,表也随之改变,这是看清 em 究竟做了什么的好办法。
并排尝试两个基准
输入 1.5,基准取 14,然后取 20。您得到 21 和 30 像素。这就是 em 与 rem 之间全部差别的一次实验:同一个数字,两个元素,两个大小。
如何在这里把 em 换算成 px
输入 em 值
在第一栏输入以 em 计的大小。接受小数,所以 0.714 和 1 一样可用。
设置 em 所指的字体大小
输入元素的字体大小,如果属性是 font-size,则输入其父元素的。如果拿不准,请保留 16,并把结果当作近似值。
读出像素值
答案立刻出现,基准显示在旁边。把它复制到您的笔记里,或与设计文件比较。
这些单位从哪里来
em
em 比网络更古老。在金属活字中,它是一块铸块的宽度,以大写字母 M 命名,排印者至今仍说 em 破折号和 em 空格。在 CSS 中,它指有效的字体大小,这就是为什么它会随着元素的嵌套而变化。
像素与 rem
当显示器不再具有可预测的密度时,以真实像素度量的页面,在屏幕越来越清晰时就变成了一个不断缩小的页面。于是 CSS 像素被重新定义为一个参考长度:在舒适的阅读距离上看到的约 1/96 英寸。rem 的加入是为了摆脱 em 的层层叠加:它是根元素的 em,从不相乘。如果您两者都用,把 px 换算成 em可走另一个方向。
开发者何时把 em 换算成 px
对照设计文件检查构建
设计师交来一份以像素计的文件,而代码是以 em 写的。要检查页面是否吻合,您用每个组件的字体大小把 em 换算成 px。一个标签为 14 px、内边距为 0.714em 1.429em 的按钮,应当得出 10 px 和 20 px,如果设计写的是 12 和 24,就有一个是错的。
调试间距
当一个间隙看起来太大或太小时,原因通常是某个 em 值所指的字体比您预期的更大或更小。用元素的计算后字体大小去换算它,立刻告诉您问题是否出在算术上。
阅读不熟悉的代码
继承来的样式表里满是 em 值,您必须重建它们的像素大小。用正确的基准换算其中几个主要的,就能给您一幅设计的地图。
编写文档和测试
测试页面的人用像素描述所见。一位说内边距是 0.9em 的开发者,对测试员意义不大;12.6 px 才有意义。换算让双方互相理解。
把 em 换算成 px 时的陷阱
使用错误的基准
最常见的错误。对 font-size,使用父元素的大小;对所有其他属性,使用元素自己的。在输入基准之前,请检查属性。
忘了以 em 计的父元素
如果父元素的大小本身是以 em 计的,您就必须沿着链条追溯。使用开发者工具中的计算值可以走捷径。
假定屏幕显示相同的像素
CSS 像素不是设备像素。在高密度显示器上,一个 CSS 像素可能是两三个设备像素。换算给出的是 CSS 像素,即设计工具和样式表共享的单位。
把答案当作承诺
如果读者放大了文字,或组件以另一个字体大小被复用,像素就会改变,这正是它们应有的行为。换算出的数字描述的是一种情形,而不是所有情形。
人们在转换前会问的问题
1 em 是多少像素?
与有效的字体大小一样多:在默认情况下,普通正文是 16 px,24 px 的元素里是 24 px。
2 em 是多少像素?
有效字体大小的两倍。在 16 px 时是 32 px。
为什么我的浏览器显示的不同?
元素的真实字体大小与您输入的基准不同。请在开发者工具中读取计算后的字体大小。
em 和 rem 一样吗?
不一样。em 相对于元素,rem 相对于根。
我的数字会被上传吗?
不会。算术在您的浏览器中运行,没有任何东西被发送到任何地方。
我如何换回去?
用px 转 em,它是除而不是乘。
让 em 样式表保持易懂的习惯
给基准加注释
像 padding: 0.75em 1.25em; /* 12px 20px at 16px */ 这样的一行只多花几个字符,却能让下一位读者省去一次换算。它记录了您假定的基准。
每个组件只设置一次字体大小
在组件的根元素上定义组件的字体大小,在其内部用 em 引用它。这样组件中每个值的基准都相同,您可以放心地对照它把 em 换算成 px。
间距用 em,文字用 rem
这是大多数样式表选定的分工,它让算术保持简单。对于相对于屏幕的大小,px 转 vw和vw 转 px是工具。
在不同的文字大小下测试
在浏览器中调高默认的文字大小,然后看页面。如果间距跟随文字,em 值就在起作用。如果没有,就是有东西还留在像素里。
处理棘手情形的一个方法
由外向内工作
当一个组件深藏在其他元素之内,而它的 em 值看起来令人困惑时,从您知道大小的最外层元素开始,向内工作,一次换算一层。边做边把每个像素大小写进笔记。两三层之后,整条链条就在纸上了,您可以确切看到一个令人意外的数字从何而来。这只需一分钟,却替代了一个小时的猜测。
决定是否要简化
如果您必须经过四层才能把 em 换算成 px 来理解一个版面,那是样式表在告诉您些什么。请考虑把字体大小移到 rem,让每个都指向根,只把间距留在 em 中。页面看起来会一样,而明年读起来会容易得多。
相关换算器
同一系列的工具涵盖相邻的换算。要回到 em,请使用px 转 em。对于相对于根的大小,有px 转 rem和rem 转 px,对于相对于屏幕的大小,有px 转 vw和vw 转 px。对于同一份样式表的颜色,HEX 转 RGB和RGB 转 HEX处理这些记法。
一个算例
假设您在审查一个按钮组件。标签是 14 px,CSS 写着 padding: 0.714em 1.429em,图标与标签之间的间隙是 0.5em。您输入 14 作为基准,然后输入 0.714 读到 10 px,输入 1.429 读到 20 px,输入 0.5 读到 7 px。设计文件写的是 10、20 和 8。三个中有两个吻合,所以您看那个间隙:基准为 14 时 8 px 应是 0.571 em,有人把它取整成了 0.5。您在审查中提出来,修复只是一个数字。
一份简短的核对表
换算之前
找出 em 所指的字体大小,从开发者工具中,或从代码里的字体大小链条中。
换算时
输入 em 值,设置基准,读出像素,并留意结果旁边显示的基准。
换算之后
与设计文件比较。如果数字不同,请在怀疑代码之前先检查基准。
常见错误
不检查就用 16
只有当元素的字体大小是 16 px 时它才是对的。
混淆 em 和 rem
它们看起来相似,表现却不同。请为每个使用正确的页面。
忘了 em 会叠加
嵌套元素内的值是相对于您可能没见过的大小。请沿着链条追溯。
您的数字留在您的设备上
计算在本地进行。您的值由您自己的浏览器使用,没有任何东西被发送到任何地方。事后没有需要删除的东西,也没有要创建的账户。这就是把 em 换算成 px 的朴素办法。
小结
要在这里把 em 换算成 px,请输入以 em 计的大小和它所指的字体大小,按公式 px = em × 基准立即读出以像素计的结果。换算保留相对于使用该值之处有效字体大小的比例。它不能给出整个页面的唯一答案:em 相对于元素自身,或对 font-size 而言相对于父元素,所以同样的 1.5 em 在 16 px 的元素里是 24 px,在 24 px 的元素里是 36 px,而 em 套 em 会相乘。要得到一个处处成立的数字,请使用 rem。没有任何东西被上传。