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 |
Che cosa fa questo convertitore px / rem
Converte misure espresse in px verso rem e viceversa. Il valore di riferimento — la font-size dell'elemento radice (html) — si può cambiare liberamente e il risultato si ricalcola all'istante.
La prima cosa da afferrare è che il rem poggia sulla dimensione del carattere dell'elemento radice, e che quella dimensione può essere cambiata da chi visita la pagina. Se nelle impostazioni del browser la dimensione del carattere viene aumentata, tutto ciò che è espresso in rem cresce con essa: è precisamente in questo che consiste l'unità. Per tale ragione non si deve scrivere html { font-size: 16px } nel foglio di stile. Così facendo si annulla la preferenza della persona e si sbarra la strada a chi ha bisogno di ingrandire il testo per leggerlo. Per alterare il riferimento, usate una notazione relativa come % o rem.
In secondo luogo, la differenza fra em e rem sta nell'accumularsi o meno. L'em prende a base la dimensione del carattere dell'elemento in cui si trova, sicché nelle strutture annidate si moltiplica; il rem guarda sempre all'elemento radice e non cambia per quanti livelli vi siano.
Vi è poi un punto che confonde spesso: l'em dentro una media query non poggia sull'elemento radice ma sulla dimensione predefinita del browser. Anche riducendo la font-size di html, i punti di rottura non si muoveranno con essa.
Come si usa
- Fissate il valore di riferimento Nella maggior parte dei browser il valore predefinito è 16px. Nel dubbio lasciatelo a 16.
- Inserite px oppure rem Scrivete da un lato o dall'altro e di fronte comparirà subito la conversione.
- Copiate la notazione CSS La stringa con la sua unità si porta via così com'è.
- Consultate la tabella di corrispondenza Le misure d'uso corrente stanno raccolte, pronte da scegliere.
Consigli per sfruttarlo al meglio
- 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.
Casi d'uso
Portare in CSS le misure di un progetto grafico
I progetti arrivano di norma in px. Fissato il riferimento, il passaggio a rem diventa meccanico.
Uniformare le unità in un progetto esistente
Nel riordinare codice in cui px e rem si mescolano, conviene tenere la tabella a portata.
Cambiare il riferimento e osservarne l'effetto
Spostando il valore di base si sposta con esso tutto ciò che è espresso in rem. Qui se ne misura l'entità.
Fissare i punti di rottura di una media query
L'em di una media query poggia sul valore predefinito del browser, non sulla radice. La premessa della conversione è diversa.
Termini impiegati
- rem
- Unità relativa alla dimensione del carattere dell'elemento radice (html). Il suo riferimento non cambia con l'annidamento.
- em
- Unità relativa alla dimensione del carattere dell'elemento in cui compare. Nelle strutture annidate si moltiplica.
- Elemento radice
- L'elemento
html, il più esterno del documento. Ogni conversione in rem parte dalla sua dimensione del carattere. - Dimensione predefinita del browser
- 16px nella maggior parte degli ambienti. Chi visita la pagina può cambiarla, ed è proprio questo che va rispettato.
- Fissare la font-size di html in px
- Annulla la preferenza della persona e va perciò evitato. Per alterare il riferimento, usate una notazione relativa come
%. - em dentro una media query
- Poggia sul valore predefinito del browser, non sull'elemento radice. Cambiare la font-size di html non sposta i punti di rottura.
Domande frequenti
A proposito — Come rem è entrato nella specifica CSS
L'unità rem è comparsa per la prima volta nella bozza del W3C «CSS3 Values and Units», pubblicata nel settembre 2006. Finché non si è diffusa, 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. Finché occorreva supportare Internet Explorer 8 e le versioni precedenti, che non riconoscono rem, era comune scrivere prima un valore in px come alternativa e poi il valore in rem (font-size: 16px; font-size: 1rem;) (IE9 e IE10 lo supportavano solo in parte, ignorandolo nella proprietà abbreviata font e negli pseudo-elementi). Quando non è stato più necessario supportare quei vecchi IE, a metà degli anni 2010, questa alternativa non è più servita.
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.