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 reattivo moderno si appoggia alle unità relative - scala rem ed em con le impostazioni della dimensione del carattere e lo zoom dell'utente - mentre i mockup di progettazione e i fogli di stile più vecchi sono solitamente espressi in pixel fissi Questo strumento prende un valore come 24 px e lo mostra come 1.5rem, 1.5em, 18pt e 150% contemporaneamente, e funziona in ogni direzione da un singolo campo.

Le conversioni si imperniano tutte su un numero: la dimensione del carattere root (base), che per impostazione predefinita è 16px perché è il browser predefinito per l'elemento html Un rem è sempre uguale a quella dimensione 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 è trattata come una quota della dimensione del carattere di base, quindi il 100% è uguale alla base e il 50% è uguale alla metà di essa.

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.