Convertitore PX ↔ REM ↔ EM ↔ PT
Converti le unità CSS in entrambe le direzioni con una dimensione radice configurabile — px, rem, em e pt si aggiornano insieme.
528 visualizzazioni
Come si relazionano le unità
rem = px ÷ dimensione radice (16 px di default, quindi 24 px = 1.5rem); em funziona allo stesso modo ma rispetto alla dimensione del font ereditata dall'elemento stesso — il campo "dimensione di contesto" del convertitore; pt è l'unità di stampa, con 1pt = 1,333px (96dpi ÷ 72). Digita in un campo qualsiasi e gli altri si aggiornano di conseguenza.
Regola pratica: usa rem per dimensioni del font e spaziature, così le preferenze di dimensione del font dell'utente ridimensionano l'intero layout; em per i padding che devono seguire il testo del proprio componente; px solo per ciò che non deve mai ridimensionarsi (bordi da un pixel). Impostare la radice a 10 px (il vecchio trucco del 62,5%) facilita il calcolo mentale, ma è meglio evitarlo nei nuovi progetti — le librerie di componenti presuppongono 16.
Domande Frequenti
Perché il mio valore in em è diverso da quello in rem?
em si moltiplica per la dimensione del font definita più vicina e si annida: un 1.5em all'interno di un elemento da 1.5em equivale a 2,25 volte la radice. rem fa sempre riferimento alla radice — questa prevedibilità è il motivo del suo successo.
1pt è davvero 1,333px?
In CSS sì, per definizione: 1in = 96px = 72pt. I PDF di stampa e il CSS concordano su questo rapporto, anche se la dimensione fisica dipende dal DPI reale dello schermo.
Strumenti Simili
Segnala un Problema
Convertitore PX ↔ REM ↔ EM ↔ PT