Cos'e' Convertitore Unità CSS?
CSS supporta diverse unità per le dimensioni — quelle assolute come px e pt, e quelle relative come rem, em, vw, vh e %. Le unità relative sono essenziali per un design responsivo e accessibile (rem in particolare rispetta la preferenza di dimensione del font del browser dell'utente), ma convertire mentalmente tra loro è davvero difficile, poiché il risultato dipende dal contesto: la dimensione del font radice, la dimensione del font dell'elemento corrente, o le dimensioni del viewport.
Questo convertitore fa quel calcolo per te: imposta la tua dimensione del font base, le dimensioni del viewport e il valore che stai convertendo, e vedi istantaneamente il valore equivalente in ogni altra unità — utile per tradurre le misure in pixel di un mockup di design in valori rem/vw responsivi, o per verificare cosa renderizza realmente sullo schermo una regola CSS esistente.
Quando Usare Questo Calcolatore
- Quando devi valutare i costi dello strumento prima di iniziare un progetto
- Quando confronti i risultati con altri strumenti simili
- Quando impari a usare lo strumento in diversi scenari
- Quando condividi i risultati con il team o i clienti
- Quando verifichi l'accuratezza dei calcoli dello strumento
- Quando cerchi un modo rapido e semplice per risolvere un problema specifico
Passaggi:
- Inserisci il valore che vuoi convertire e seleziona la sua unità di partenza.
- Imposta la tua dimensione del font base (predefinita allo standard del browser di 16px).
- Per le conversioni vw/vh, inserisci la larghezza e l'altezza del viewport di destinazione.
- Leggi istantaneamente il valore equivalente in ogni altra unità.
Formula
1rem = 1em = dimensione font base (predefinita 16px)
1pt = 96/72 px ≈ 1,333px
1vw = larghezza viewport / 100
1vh = altezza viewport / 100
1% = valore di riferimento / 100
Casi d'Uso
- Convertire le specifiche in pixel di un mockup Figma/Sketch di un designer in valori rem per CSS accessibile
- Controllare cosa renderizza realmente una dimensione del font responsiva basata su vw a una larghezza dello schermo specifica
- Tradurre CSS legacy per stampa o email basato su pt in px o rem standard per il web
- Verificare se la scala di spaziatura di un design system è coerente tra le diverse unità
- Controllare rapidamente un valore CSS durante una code review senza aprire gli strumenti per sviluppatori
Vantaggi Principali
- Converte tra tutte e 7 le unità CSS comuni in un unico posto
- Usa la tua dimensione del font base e il viewport reali, non un'ipotesi fissa
- Risultati istantanei mentre digiti — nessun bisogno di aprire gli strumenti per sviluppatori del browser
- Gratuito, senza registrazione, funziona interamente nel tuo browser
Consigli Pro
- Preferisci rem a em per le dimensioni del font per evitare accumuli imprevisti nei componenti annidati
- Usa dvh/svh invece di vh per i layout mobili a schermo intero se i tuoi browser target li supportano
- Mantieni una dimensione del font base coerente in tutto il tuo design system affinché le conversioni rem restino prevedibili
- Quando traduci un design pixel-perfect, converti la spaziatura in rem ma mantieni la larghezza dei bordi e altri dettagli fini in px
Errori Comuni da Evitare
- Presumere che 1rem equivalga sempre a 16px, senza controllare se la dimensione del font radice è stata modificata
- Usare vh per layout mobili a schermo intero senza considerare il comportamento della barra degli indirizzi del browser
- Annidare dimensioni del font basate su em ed essere sorpresi quando si accumulano inaspettatamente
- Mescolare px e rem in modo incoerente all'interno dello stesso componente, rompendo la scalabilità dell'accessibilità
Termini Chiave Spiegati
- Dimensione font radice: la dimensione del font impostata sull'elemento html, rispetto alla quale sono relative tutte le unità rem
- Viewport: l'area visibile di una pagina web nella finestra del browser
- Unità assoluta: un'unità come px o pt con una dimensione fissa nel mondo reale, non relativa ad alcun contesto
- Unità relativa: un'unità come rem, em, vw o % la cui dimensione dipende da un altro valore
Concetti correlati
- Convertitore colore: Converti tra formati colore HEX, RGB e HSL
- Convertitore lunghezza: Converti tra pollici, centimetri, pixel e altro
- Convertitore unità: Converti tra diverse unità di misura
- Calcolatore rapporto aspetto: Calcola e converti i rapporti d'aspetto
- Convertitore dati: Converti tra byte, KB, MB, GB e TB
Esempio
Con una dimensione del font base di 16px, 1.5rem si converte in 24px. Con una larghezza del viewport di 1440px, 5vw si converte in 72px.
Interpretazione dei risultati
Questo strumento mostra risultati dettagliati in base agli input forniti. Esamina attentamente ogni sezione per capire come interpretare i numeri e prendere decisioni basate su di essi.
Se hai domande sul funzionamento dello strumento o sull'interpretazione di risultati specifici, consulta la sezione Domande Frequenti qui sotto o contatta il supporto.