Convertitore da PX a REM

La regola pratica a cui arrivano molti team è: usa rem per le dimensioni del carattere, la spaziatura del layout e i breakpoint; usa em consapevolmente per gli elementi che dovrebbero scalare con il proprio componente, come il padding interno di un pulsante o la dimensione di un’icona accanto al testo.

Perché usare rem invece di px?

• Accessibilità. Un visitatore che imposta la dimensione del carattere predefinita del browser su 20 px vede crescere proporzionalmente ogni dimensione basata su rem. Le dimensioni codificate in px ignorano completamente questa preferenza.
• Una sola manopola per il ridimensionamento globale. Cambia la dimensione del carattere radice in una media query e l’intera scala tipografica e il ritmo della spaziatura cambieranno insieme, senza override per singolo componente.
• Ritmo di spaziatura coerente. Esprimere padding e margini in rem mantiene il ritmo verticale legato alla scala tipografica invece di lasciarlo separare.
• Compatibile con i token di design. I moderni sistemi di progettazione (e la scala predefinita di Tailwind) pubblicano le dimensioni in rem, quindi convertire i valori px esistenti facilita il passaggio di consegne.

Il trucco della dimensione del carattere radice al 62.5%

Molti team aggiungono questa regola per fare in modo che 1rem equivalga a 10 px, rendendo semplici i calcoli mentali:

html { font-size: 62.5%; }  /* 16px × 0.625 = 10px */
body { font-size: 1.6rem; } /* torna a 16px leggibili */

.card-title { font-size: 2.4rem; } /* 24px */
.card-body  { font-size: 1.4rem; } /* 14px */

Poiché 62.5% è una percentuale della dimensione predefinita del browser, non un valore fisso in pixel, rispetta comunque la preferenza del visitatore per la dimensione del carattere. Ricorda di riportare body a circa 1.6rem, altrimenti il testo predefinito verrebbe visualizzato a 10 px. Imposta il campo della dimensione del carattere radice qui sopra su 10 per convertire usando questa configurazione.

rem nelle media query

All’interno di una media query, rem viene calcolato rispetto alla dimensione del carattere radice iniziale del browser, non rispetto alla dimensione dell’elemento html impostata nel CSS. Quindi @media (min-width: 48rem) equivale sempre a 768 px, anche se il tuo foglio di stile dichiara html { font-size: 10px }. Questo rende i breakpoint in rem sicuri e prevedibili, ed è uno dei pochi casi in cui em e rem si comportano allo stesso modo.

Quando dovresti ancora usare px

• Bordi sottilissimi e divisori — un bordo da 1 px dovrebbe restare di 1 px; ridimensionarlo produce linee sfocate inferiori al pixel.
• Risorse di dimensione fissa — offset degli sprite, offset precisi delle ombre e immagini con dimensioni intrinseche note.
• Output canvas e stampa — quando una misura fisica o in pixel del dispositivo è davvero ciò che intendi.

Come usare questo convertitore

1. Scegli una direzione: px → rem, rem → px, px → em oppure em → px.
2. Inserisci i valori: un numero oppure un’intera scala separata da virgole o spazi (fino a 20 valori alla volta). Le unità finali come 24px sono accettate e ignorate.
3. Imposta la dimensione del carattere radice: mantieni 16 per le impostazioni predefinite del browser oppure tocca un chip preimpostato per 10 (trucco del 62.5%), 12, 14, 18 o 20.
4. Fai clic su Converti: leggi la tabella dei risultati, il righello delle dimensioni alla scala reale, l’anteprima di accessibilità e il blocco CSS.
5. Copia il CSS: un pulsante copia ogni dichiarazione font-size conservando il valore pixel di origine in un commento.

Domande frequenti

Come converto px in rem?

Dividi il valore in pixel per la dimensione del carattere radice. Con la radice predefinita del browser di 16 px, 24 px ÷ 16 = 1.5rem. Per fare il contrario, moltiplica il valore rem per la dimensione del carattere radice: 1.5rem × 16 = 24 px.

Quanti px sono 1rem?

1rem equivale alla dimensione del carattere radice della pagina. Nei principali browser la predefinita è 16 px, quindi 1rem è 16 px, a meno che l’elemento html o le impostazioni del browser del visitatore non la modifichino.

Qual è la differenza tra rem ed em?

rem è sempre relativo alla dimensione del carattere radice dell’elemento html, quindi 1.5rem ha la stessa dimensione ovunque nel documento. em è relativo alla dimensione del carattere dell’elemento genitore, quindi gli elementi annidati si moltiplicano: 1.5em dentro un altro 1.5em viene visualizzato a 2.25 volte la dimensione di base.

Che cos’è il trucco della dimensione del carattere radice al 62.5%?

Impostare html { font-size: 62.5%; } porta la radice a 10 px invece di 16 px, quindi 1rem equivale a 10 px e i calcoli mentali diventano semplici: 24 px sono 2.4rem. La dimensione continua a seguire la preferenza del visitatore per la dimensione del carattere del browser perché 62.5% è relativo, non un valore assoluto in pixel.

Devo usare px o rem per le dimensioni del carattere?

Usa rem per le dimensioni del carattere, la spaziatura e le media query, così il layout cresce quando un visitatore aumenta la dimensione del carattere predefinita del browser. Riserva px ai valori che non devono scalare, come bordi sottilissimi, divisori da un pixel e alcuni offset delle ombre.

I valori rem devono essere numeri interi?

No. I browser gestiscono senza problemi i valori rem frazionari e calcolano internamente dimensioni inferiori al pixel. Se preferisci numeri puliti, scegli una dimensione del carattere radice che divida uniformemente la tua scala, come 10 px o 8 px, oppure usa l’opzione di precisione decimale di questo convertitore.

rem funziona per padding, margin e media query?

Sì. rem è valido ovunque CSS accetti una lunghezza, inclusi padding, margin, width, gap e border-radius. Nelle media query rem viene calcolato rispetto alla radice iniziale di 16 px invece che rispetto alla dimensione personalizzata dell’elemento html, quindi un breakpoint di 48rem è sempre 768 px.

Risorse aggiuntive

• Unità di lunghezza CSS - MDN
• Lunghezze relative al carattere - Valori CSS W3C