PX to REM Converter
PX → REM
REM → PX
Tabella di conversione (base 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 |
Domande Frequenti
Tutto quello che devi sapere sulle unità CSS px, rem ed em
Qual è la differenza tra px, rem ed em?
px è un'unità assoluta che non scala. rem (root em) è relativo alla dimensione del font dell'elemento root (html), di default 16px. em è relativo al font size dell'elemento padre. rem è preferito per la scalabilità e l'accessibilità.
Perché usare rem invece di px?
rem migliora l'accessibilità permettendo agli utenti di scalare tutto il testo cambiando il font size del browser. Con Tailwind CSS, 1rem corrisponde normalmente a 4 unità (es: text-base = 1rem = 16px).
Come impostare il base font size?
In CSS puoi impostare il font base con html { font-size: 16px; } o html { font-size: 62.5%; } (quest'ultimo rende 1rem = 10px per calcoli più semplici). Molti design system usano 16px come base predefinita.
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，计算更简单）。