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.
Was unterscheidet px, rem und em?
px ist eine absolute Einheit, die nicht mitskaliert. rem bezieht sich auf die Schriftgröße des Wurzelelements html, voreingestellt 16px. em bezieht sich auf die Schriftgröße des Elternelements. Für Skalierbarkeit und Zugänglichkeit ist rem vorzuziehen.
Warum rem statt px benutzen?
rem verbessert die Zugänglichkeit, weil Nutzer den gesamten Text skalieren können, indem sie die Schriftgröße des Browsers ändern. In Tailwind CSS entspricht 1rem normalerweise 4 Einheiten, etwa text-base gleich 1rem gleich 16px.
Wie stellt man die Basisschriftgröße ein?
In CSS mit font-size 16px auf dem html-Element, oder mit 62,5 Prozent, womit 1rem gleich 10px wird und sich leichter rechnen lässt. Viele Designsysteme behalten 16px als Grundlage bei.