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.

Ogni conversione richiede due passaggi Lo strumento trasforma prima il tuo input in pixel moltiplicandolo per il numero di pixel in un'unità di input, quindi divide quel valore di pixel per il numero di pixel in un'unità target, ad una base di 18 px, 27 px diventa 27 18 = 1,5 rem, e ad ogni base 12pt diventa 12 × 96 72 = 16 px I risultati sono arrotondati al massimo a quattro cifre decimali, quindi 15 px ad una base di 16 px legge 0,9375 rem Le unità viewport come vw e vh non fanno parte del convertitore, perché dipendono dalla dimensione della finestra piuttosto che da una dimensione del carattere Una dimensione del carattere base pari o inferiore a zero scende di nuovo a 16 px.

Tutto viene eseguito nel browser durante la digitazione, quindi non c'è caricamento e nessuna attesa su un server Cambia la dimensione del carattere di base per modellare un componente che imposta la propria dimensione del carattere, leggi i risultati in ogni unità e copia quello di cui hai bisogno La tabella px-to-rem integrata ti offre un riferimento pronto per le dimensioni che emergono maggiormente in una scala di tipi.