Convertitore da PX a REM (e REM a PX)
Converti px in rem e rem in px istantaneamente. Modifica il font-size radice per adattarlo al tuo progetto e vedi il risultato in tempo reale. Gratuito, senza registrazione.
Tabella da PX a REM (base 16px)
Valori px comuni convertiti in rem, assumendo il font-size radice predefinito di 16px.
| px | rem |
|---|---|
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 28px | 1.75rem |
| 32px | 2rem |
| 36px | 2.25rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 64px | 4rem |
Suggerimenti
- Per impostazione predefinita 1rem equivale a 16px, ma gli utenti con problemi di vista spesso aumentano la dimensione del testo predefinita del browser: i valori in rem seguono automaticamente questa impostazione, mentre i valori in px no.
- I breakpoint delle media query sono tradizionalmente scritti in px, ma font-size, padding e margin sono buoni candidati per rem, così l'equilibrio generale del layout si mantiene quando l'utente cambia la sua preferenza di dimensione del testo.
- Alcuni team impostano html { font-size: 62.5%; } in modo che 1rem equivalga a 10px, semplificando il calcolo mentale (1,6rem = 16px). Inserisci 10 come valore base sopra per convertire secondo questa convenzione.
- Una convenzione comune è usare rem per i valori di layout a livello di pagina ed em per la spaziatura interna di un componente riutilizzabile, in modo che il componente si adatti in base al proprio font-size ovunque venga usato.
Domande frequenti
A proposito — Come rem è entrato nella specifica CSS
L'unità rem è stata aggiunta al modulo CSS Values and Units intorno al 2011. Prima di allora, quasi tutti i siti web dimensionavano testo e spaziatura con px o em, ed em aveva un problema noto: basandosi sul font-size dell'elemento genitore, l'annidamento degli elementi faceva accumulare la dimensione effettiva in modi difficili da prevedere nei layout complessi.
rem è stato progettato proprio per risolvere questo problema, facendo riferimento a un unico punto di ancoraggio sempre disponibile: l'elemento radice, indipendentemente dal livello di annidamento. Negli anni in cui Internet Explorer 9 non supportava ancora rem, era comune scrivere prima un valore in px come alternativa e poi il valore in rem (font-size: 16px; font-size: 1rem;). Quando i principali browser lo hanno adottato a metà degli anni 2010, questa alternativa non è più stata necessaria.
Oggi costruire tutta la scala tipografica e di spaziatura di un sito attorno a rem è una pratica comune di accessibilità: permette all'intera pagina di scalare con eleganza quando un visitatore aumenta la dimensione del testo del browser, invece di rompersi o tagliare i contenuti. Linee guida come le WCAG (Web Content Accessibility Guidelines) raccomandano esplicitamente di non fare affidamento solo su unità fisse per la dimensione del testo.