PX ↔ REM
PX 转 REM 转换器
将像素转换为rem/em，反之亦然，可配置基础字体大小
PX → REM
REM → PX
转换表（基础 16px)
| PX | REM | Tailwind |
|---|---|---|
| 4px | 0.25rem | p-1 |
| 8px | 0.5rem | p-2 |
| 12px | 0.75rem | p-3 |
| 14px | 0.875rem | |
| 16px | 1rem | p-4 / text-base |
| 18px | 1.125rem | |
| 20px | 1.25rem | |
| 24px | 1.5rem | p-6 |
| 32px | 2rem | p-8 |
| 40px | 2.5rem | |
| 48px | 3rem | |
| 64px | 4rem | |
| 80px | 5rem | |
| 96px | 6rem |
FAQ
常见问题
关于CSS单位px、rem和em您需要了解的一切
px、rem和em有什么区别？
px是不缩放的绝对单位。rem（root em）相对于根元素（html）的字体大小，默认16px。em相对于父元素的字体大小。rem在可扩展性和可访问性方面更受欢迎。
为什么使用rem而不是px？
rem通过允许用户更改浏览器字体大小来缩放所有文本，从而提高可访问性。在Tailwind CSS中，1rem通常对应4个单位（如text-base = 1rem = 16px）。
如何设置基础字体大小？
在CSS中，您可以使用html { font-size: 16px; }或html { font-size: 62.5%; }设置基础字体（后者使1rem = 10px，计算更简单）。