Cosa fa
Questo strumento converte le lunghezze CSS tra pixel e le unità relative rem ed em. Scrivi un valore come 24px per ottenere 1.5rem, elenca più valori uno per riga per convertirli tutti insieme, oppure incolla un intero foglio di stile e ogni valore px verrà riscritto sul posto. Una tabella di riferimento mostra le dimensioni comuni da 1px a 128px con la tua dimensione di base. Nulla lascia il browser.
Come si usa
- Incolla CSS o scrivi un valore per riga. I numeri senza unità vengono letti come px (o come rem/em se la direzione è invertita) e un valore scritto nell’altra unità viene convertito nel senso opposto.
- Imposta la Dimensione font di base. Tutti i browser usano 16px come predefinito; alcuni progetti scrivono
html { font-size: 62.5% }per avere 1rem = 10px. - Scegli la Direzione (px → rem o rem → px), l’Unità (rem o em) e quanti Decimali tenere.
- Se serve, usa Lascia in px sotto per lasciare in px i bordi da 1px e le altre linee sottili.
- Copia il risultato con il pulsante sopra di esso.
Esempio
/* before */
.title { font-size: 24px; margin-bottom: 12px; }
/* after (base 16px) */
.title { font-size: 1.5rem; margin-bottom: 0.75rem; }I valori che non sono in px, come percentuali, colori, nomi di file in url() e classi come .mt-16px, non vengono toccati. 0px diventa 0.
px, rem ed em
- px è un’unità assoluta: ignora la dimensione del font preferita dal lettore.
- rem («root em») è un multiplo della dimensione del font dell’elemento
html. Se il lettore imposta il browser a 20px, 1rem diventa 20px e l’intero layout si adegua. - em è un multiplo della dimensione del font dell’elemento corrente. È comodo per spaziature che devono seguire il proprio testo, ma gli em annidati si moltiplicano; per questo rem è la scelta predefinita più sicura.
Anche le media query vengono convertite: @media (min-width: 768px) diventa 48rem (o 48em), così i breakpoint restano coerenti quando il lettore ingrandisce il testo. Nelle media query rem ed em si riferiscono entrambi alla dimensione del font predefinita del browser, non alla tua regola html.
Domande frequenti
› Come si convertono i px in rem?
Dividi il valore in pixel per la dimensione del font radice. Con i 16px predefiniti dei browser, 24px ÷ 16 = 1.5rem e 12px ÷ 16 = 0.75rem. Per tornare indietro moltiplica: 2rem × 16 = 32px.
› Che differenza c’è tra rem ed em?
rem è relativo alla dimensione del font dell’elemento radice html, quindi 1rem è uguale ovunque nella pagina. em è relativo alla dimensione del font dell’elemento corrente (o del genitore per lo stesso font-size), perciò si moltiplica quando gli elementi sono annidati. Usa rem per quasi tutto ed em quando qualcosa deve scalare con il proprio testo, come il padding di un pulsante.
› Perché usare rem invece di px?
Se un lettore aumenta la dimensione del font predefinita nelle impostazioni del browser, le misure in rem crescono con essa, mentre i px restano fissi. rem mantiene il layout accessibile e permette di scalare l’intero design cambiando un solo valore radice.
› Devo convertire i bordi da 1px?
Di solito no. Una linea da 0.0625rem può apparire sfocata o sparire con certi livelli di zoom. Imposta «Lascia in px sotto» a 2px e il convertitore lascerà in px i bordi e gli altri valori minuscoli.