Convertire px in rem (e rem in px)

Da pixel a rem senza fare conti

Questo convertitore trasforma una misura in pixel in rem, e viceversa, partendo dalla dimensione del font di base della tua pagina. Calcola anche i valori em in base al genitore, converte un intero blocco di CSS e mostra una tabella di corrispondenza da 1 a 96 px. Tutto avviene nel tuo browser: non viene inviato nulla.

Come si usa

1. In «Dimensione del font di base» lascia 16 o scegli un valore rapido: 10, 14, 16, 18 o 20 px.
2. In «Convertire px ↔ rem» scrivi in «Pixel (px)» o in «rem»: l'altro campo si aggiorna e sotto compare la formula. «Copia» mette il valore con la sua unità negli appunti.
3. Per un em, indica la «Dimensione del genitore (px)» e poi il valore in pixel o in em.
4. Per un foglio di stile intero, incolla il codice in «CSS da convertire». Imposta «Ignora 1px», «Ignora i bordi (border, outline)», «Decimali» e «Mantieni il px in un commento», poi clicca su «Copia il CSS».
5. Nella tabella, un clic su un valore lo copia.

La base e le opzioni restano salvate sul tuo dispositivo.

px, rem ed em: le differenze

Il px è una misura fissa. Il rem vale la dimensione del font dell'elemento radice html, cioè 16 px se nessuno la cambia. L'em vale la dimensione del font del genitore e si somma: un testo a 1.2em dentro un blocco a 1.2em misura 1,44 volte la base, ossia 23,04 px con base 16.

La formula è rem = px ÷ base e, al contrario, px = rem × base. Con base 16, 24 px sono 1.5rem, 40 px sono 2.5rem e 1.25rem sono 20 px. È il calcolo che serve quando il layout arriva con tutte le misure in pixel e il progetto lavora in rem.

Perché il rem conta per l'accessibilità

Chi vede poco spesso aumenta la dimensione del testo predefinita nel browser, per esempio da 16 a 20 px. Un titolo scritto in 24px resta a 24 px e ignora questa scelta. Scritto in 1.5rem, sale a 30 px. Il rem rispetta la preferenza dell'utente, come chiedono le linee guida sull'accessibilità che in Italia valgono per i siti della pubblica amministrazione.

Quando usare rem o em

• rem per dimensioni del testo, margini e spaziature del layout: tutta la pagina dipende da un solo valore.
• em per ciò che deve seguire il testo del proprio componente, come il padding di un pulsante. Con un genitore di 20 px, 30 px sono 1.5em.
• px per bordi sottili e ombre, da qui l'opzione «Ignora i bordi (border, outline)».

Esempio di conversione in blocco

Con base 16 e bordi ignorati, padding: 16px 24px; border: 1px solid; font-size: 18px diventa padding: 1rem 1.5rem; border: 1px solid; font-size: 1.125rem. Selettori, condizioni @media, commenti, stringhe e url() non vengono toccati.

Domande frequenti

Quanti pixel è 1rem?

1rem vale la base della pagina: 16 px se non hai cambiato la dimensione di html. Con html { font-size: 62.5% }, 1rem vale 10 px e 14 px diventano 1.4rem.

Devo cambiare la base se il mio sito usa 16 px?

No. Cambiala solo se il tuo foglio di stile assegna a html un'altra dimensione del font, altrimenti tutti i risultati saranno sbagliati.

Perché lasciare 1px in pixel?

Una linea di 1 px convertita in 0.0625rem può apparire sfocata o sparire su alcuni schermi. «Ignora 1px» la lascia com'è.

Quanti decimali scegliere?

Quattro bastano: 1 px è 0.0625rem con base 16. Con base 14, 10 px danno 0.7143rem con quattro decimali e 0.71rem con due, cioè 9,94 px, una differenza invisibile.