像素 / REM / EM 转换器
即时在 px、rem 和 em CSS 单位之间转换。设置自定义基础字体大小并获得方便的参考表。免费在线 CSS 单位转换器。
广告
基础字体大小 (px):
像素 (px)
REM
EM
rem 相对于根元素的字体大小。em 相对于当前元素父元素的字体大小。当父元素是根元素时，rem 和 em 相等。
参考表
| px | rem | em |
|---|---|---|
| 4px | 0.25rem | 0.25em |
| 8px | 0.5rem | 0.5em |
| 10px | 0.625rem | 0.625em |
| 12px | 0.75rem | 0.75em |
| 14px | 0.875rem | 0.875em |
| 16px | 1rem | 1em |
| 18px | 1.125rem | 1.125em |
| 20px | 1.25rem | 1.25em |
| 24px | 1.5rem | 1.5em |
| 28px | 1.75rem | 1.75em |
| 32px | 2rem | 2em |
| 40px | 2.5rem | 2.5em |
| 48px | 3rem | 3em |
| 64px | 4rem | 4em |
广告
常见问题
px、rem 和 em 有什么区别？
px（像素）是绝对单位——1px 在 1x 缩放下始终等于一个物理像素。rem（根 em）相对于根 <html> 元素的字体大小，默认通常为 16px。em 相对于元素父元素的字体大小，在嵌套元素中可能会意外级联和倍增。
为什么应该对字体大小使用 rem 而不是 px？
使用 rem 允许用户通过更改浏览器的默认字体大小来缩放整个网站。这提高了低视力用户的无障碍性。px 忽略浏览器字体大小偏好，而 rem 和 em 尊重这些偏好。大多数现代设计系统建议对排版和间距使用 rem。
我应该使用什么基础字体大小？
浏览器默认字体大小是 16px，这是最常见的基础。一些开发者在 html 元素上设置 62.5%（10px）以简化计算（1rem = 10px）。但是，这可能会覆盖用户偏好并影响无障碍性。最佳做法是将根字体大小保留在浏览器默认值并以 rem 工作。