像素转 EM/REM 转换器
全部工具
免费
通过实时表格和可直接复制的 CSS 转换 px、rem、em、pt 和 %
要转换的值
px
px
rem 相对于根字体大小；em 和 % 相对于父级。
转换后的值
px
0
rem
0
em
0
pt
0
%
0
常用值
| PX | REM | EM | PT |
|---|---|---|---|
| 10 | — | — | — |
| 12 | — | — | — |
| 14 | — | — | — |
| 16 | — | — | — |
| 18 | — | — | — |
| 20 | — | — | — |
| 24 | — | — | — |
| 28 | — | — | — |
| 32 | — | — | — |
| 40 | — | — | — |
| 48 | — | — | — |
| 64 | — | — | — |
CSS 代码片段
关于 像素转 EM/REM 转换器
像素转EM/REM转换器可以在px、rem、em、pt和百分比之间转换CSS长度值。在五种单位中任选一种输入数值,实时表格就会显示它在其余各单位中的等值——外加一段可复制、能直接粘贴进样式表的CSS代码片段。
转换过程遵循CSS实际解析单位的方式:rem相对于根元素字体大小,而em和%则相对于父元素的字体大小。这两个参照大小都可以编辑,因此你可以模拟16px的根字体配合14px的组件,或任何你所使用的设计系统比例。
常用数值表列出了设计师最常用到的尺寸——因此像“24px等于多少rem”这类问题一眼就能得到答案。这款工具免费、边输入边更新,是将固定像素设计稿转换为可访问、可缩放的基于rem的CSS的常备工具。
如何使用 像素转 EM/REM 转换器
- 输入要转换的数值并选择其单位:px、rem、em、pt或%。
- 如果根字体大小(用于rem)或父元素字体大小(用于em和%)与16px不同,请相应调整。
- 在实时表格中查看转换后的数值。
- 复制生成的CSS代码片段,或复制常用数值表中的任意数值。
常见问题
rem始终相对于根(html)元素的字体大小,而em相对于当前元素继承到的字体大小。嵌套的em值会层层叠加,这也是为什么rem在布局中通常更可预测。
在默认16px根字体大小下,16px正好等于1rem。改变根字体大小字段,转换器会重新计算——例如根字体为18px时,16px约等于0.889rem。
rem值会随用户更改浏览器基础字体大小而缩放,让需要更大字号的用户也能看清文字。固定的px大小会忽略这种偏好设置,不利于可访问性。
CSS将1pt定义为1英寸的1/72,1px定义为1英寸的1/96,因此1pt = 1.333px,12pt = 16px。磅值主要出现在打印样式表和从文字处理软件导入的文档中。
在字体大小设置中,%相对于父元素的字体大小,与em类似:100%等于父元素大小,因此16px父元素的87.5%就是14px。请设置父元素大小字段以匹配你的实际使用场景。
热门搜索
px 转 rem 转换器
px 转 em 转换器
像素转 rem
rem 转 px
css 单位转换器
px em rem 计算器
需要帮助？
使用此工具时遇到问题？请告诉我们的团队。