Px to Rem
Converti i valori pixel in rem e em per una tipografia CSS scalabile.
① Inserisci un valore in pixel ② Imposta la dimensione base del font (default 16px) ③ Copia rem o em
Perché usare rem invece di px?
Le unità rem (root em) si scalano con la preferenza di dimensione font del browser dell'utente, rendendo la tipografia più accessibile e responsiva. 1rem = 16px nella maggior parte dei browser di default, ma gli utenti possono cambiarlo tramite font-size nelle impostazioni del browser. Usare rem invece di px garantisce che il testo si scali proporzionalmente.
Domande frequenti
rem (root em) è un'unità CSS relativa basata sulla dimensione del font dell'elemento radice (<html>). Di default nella maggior parte dei browser, 1rem = 16px. A differenza di px, le unità rem si scalano quando l'utente cambia la dimensione base del font.
rem è sempre relativo all'elemento radice. em è relativo alla dimensione del font dell'elemento genitore. rem è generalmente preferito per le dimensioni dei font perché è prevedibile.
La dimensione predefinita del browser è 16px, quindi 1rem = 16px. La dimensione base può essere cambiata con html { font-size: Xpx; }.
Dividi il valore px per la dimensione base. Con base 16px: 24px ÷ 16 = 1,5rem. Scorciatoia mentale: moltiplica per 0,0625.
Sì. Usare rem per le dimensioni dei font rispetta le preferenze dell'utente, soddisfacendo il requisito WCAG 1.4.4 (Resize Text).
Usa px per bordi (1px), box-shadow e media query. Per spaziature e dimensioni del font, preferisci rem.
rem = px ÷ dimensione base. Esempio: 24px ÷ 16px = 1,5rem. Inverso: px = rem × dimensione base.