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.
Qual é a diferença entre px, rem e em?
px é uma unidade absoluta que não escala. rem é relativo ao tamanho de letra do elemento raiz, o html, por omissão 16px. em é relativo ao tamanho de letra do elemento pai. Para escalabilidade e acessibilidade prefere-se o rem.
Porquê usar rem em vez de px?
O rem melhora a acessibilidade, porque permite ao utilizador escalar todo o texto mudando o tamanho de letra do navegador. No Tailwind CSS, 1rem corresponde normalmente a 4 unidades, por exemplo text-base igual a 1rem igual a 16px.
Como se define o tamanho de letra base?
Em CSS, com font-size de 16px no elemento html, ou com 62,5 por cento, que faz 1rem valer 10px e simplifica as contas. Muitos sistemas de design mantêm os 16px como base.