Convertitore di unità CSS

Cos'è Convertitore di unità CSS?

Il Convertitore di unità CSS è uno strumento gratuito che funziona nel browser e traduce una singola lunghezza CSS in sette unità comuni: px, rem, em, pt, %, vw e vh. Gli sviluppatori front-end e i web designer lo usano per spostare un layout tra pixel assoluti e unità responsive, per verificare a quanti pixel corrisponde un rem con una dimensione del font radice personalizzata, o per convertire un valore in pt di tipo stampa in pixel dello schermo. Poiché rem dipende dalla dimensione del font radice, em e % dipendono dalla dimensione del font del genitore, e vw/vh dipendono dal viewport, il convertitore espone tutti e quattro come impostazioni regolabili. Digita un valore, scegli la sua unità di origine, e ogni campo dei risultati si aggiorna contemporaneamente. Uno snippet CSS pronto da incollare elenca tutti e sette gli equivalenti come dichiarazioni font-size.

Come usare Convertitore di unità CSS

1. Apri le Impostazioni e imposta la dimensione del font radice (il font-size dell'html su cui si basa rem), la dimensione del font del genitore (per em e %) e la larghezza e l'altezza del viewport (per vw e vh).
2. Digita il numero che vuoi convertire nel campo del valore.
3. Scegli l'unità di origine dal menu a tendina Da: px, rem, em, pt, %, vw o vh.
4. Leggi ogni equivalente nei campi dei risultati etichettati e in sola lettura; vengono tutti ricalcolati automaticamente quando modifichi il valore, l'unità o una qualsiasi impostazione.
5. Copia lo snippet CSS generato per incollare tutti e sette gli equivalenti font-size direttamente nel tuo foglio di stile.

Esempi

Radice 16px, valore 16, Da px

rem = 1

Radice 10px, valore 2, Da rem

px = 20

valore 16, Da px

pt = 12

Domande frequenti

Tra quali unità converte?

Sette unità di lunghezza CSS: px, rem, em, pt, %, vw e vh. Una qualsiasi di esse può essere l'origine, e tutti e sette gli equivalenti vengono mostrati nello stesso momento.

Perché devo impostare le dimensioni radice, del genitore e del viewport?

Queste unità sono relative. rem è un multiplo della dimensione del font radice (html), em e % sono relative alla dimensione del font del genitore, e vw/vh sono percentuali della larghezza e dell'altezza del viewport. Impostandole nelle Impostazioni indichi al convertitore a cosa corrisponde ogni unità relativa.

Come viene gestito pt?

CSS definisce 96px = 1in = 72pt, quindi 1pt equivale a 4/3 px e 1px equivale a 0,75pt. Il convertitore usa questo rapporto fisso, indipendente dalla dimensione del font o dal viewport.

Cosa succede se un valore o un'impostazione non è valido?

Se il valore non è un numero finito, o se una delle dimensioni radice, del genitore o del viewport è mancante, zero o negativa, i campi dei risultati mostrano un trattino (—) finché non fornisci numeri validi.

Viene inviato qualcosa a un server?

No. Tutte le conversioni vengono eseguite interamente lato client nel tuo browser, senza alcun caricamento e senza chiamate al server, quindi i valori che inserisci non lasciano mai il tuo dispositivo.