Convertitore di unità CSS

Un convertitore di unità CSS traduce una lunghezza tra le unità utilizzate da CSS per il tipo di dimensionamento e il layout: PX, REM, EM, PT e %. Esiste perché il design moderno e reattivo si basa su unità relative - scala REM ed EM con le impostazioni delle dimensioni del carattere e lo zoom dell'utente - mentre i modelli di design e i vecchi fogli di stile sono solitamente espressi in pixel fissi. Questo strumento prende un valore come 24px e lo mostra come 1.5rem, 1.5em, 18pt e 150% contemporaneamente, e funziona in ogni direzione da un singolo campo.

Le conversioni si basano tutte su un numero: la dimensione del carattere radice (base), che è predefinita a 16px perché è l'impostazione predefinita del browser per l'elemento HTML. Un REM è sempre uguale a quella base del carattere di base, quindi a 16px il valore 16px è 1rem, 24px è 1.5rem e 8px è 0.5rem. I punti sono legati al pixel di riferimento CSS - 1 pollice è 96px e 72pt - quindi 1pt è uguale a 96/72, circa 1.333px. La percentuale viene trattata come una quota della dimensione del carattere di base, quindi il 100% è uguale alla base e il 50% ne equivale alla metà.

Tutto viene eseguito nel tuo browser durante la digitazione, quindi non c'è caricamento, nessuna attesa su un server e nessun limite al numero di valori che converti. Modificare la dimensione del carattere di base per modellare un componente che imposta la propria dimensione del carattere, leggere i risultati in ogni unità e copiare quello che serve. La tabella da PX a REM incorporata ti dà un riferimento pronto per le dimensioni che emergono di più in una scala di tipo.