La conversione delle unità CSS è il processo di trasformazione tra varie unità di lunghezza (px, em, rem, %, vw, vh, ecc.) utilizzate nel design web.
Unità assolute e relative
Le unità CSS si dividono in assolute e relative. Le unità assolute (px, pt, cm, ecc.) hanno dimensioni fisse, mentre le relative (em, rem, %, vw, vh, ecc.) sono espresse come rapporti rispetto a un valore base.
px (Pixel)
L'unità più comune, rappresenta un punto sullo schermo. Facile da gestire per la sua dimensione fissa, ma presenta problemi di accessibilità perché ignora le impostazioni di dimensione del font dell'utente.
em (Em)
Unità relativa basata sulla dimensione del font dell'elemento genitore. 1em = font-size del genitore. Si calcola in modo composito nelle strutture annidate, il che può portare a dimensioni impreviste.
rem (Root Em)
Unità relativa basata sulla dimensione del font dell'elemento radice (html). 1rem = font-size dell'html (di solito 16px). A differenza di em, non è influenzata dall'annidamento ed è consigliata nel CSS moderno.
% (Percentuale)
Rappresenta una proporzione rispetto all'elemento genitore. Per font-size si basa sul font-size del genitore; per width, sulla larghezza del genitore. La base varia a seconda della proprietà.
vw/vh (Unità viewport)
Unità basate sulla dimensione del viewport. 1vw = 1% della larghezza del viewport, 1vh = 1% dell'altezza del viewport. Permettono layout flessibili che rispondono alla dimensione dello schermo.
pt/pc (Unità di stampa)
Unità usate nell'industria della stampa. 1pt = 1/72 di pollice, 1pc = 12pt. Usate in CSS per stampa e generazione PDF; sullo schermo si preferiscono px o rem.
Unità fisiche (cm/mm/in)
Unità che rappresentano una lunghezza fisica reale. 1in = 2.54cm = 25.4mm = 96px (definizione CSS). Utili quando è necessaria coerenza con materiali stampati, ma la dimensione fisica dello schermo non è garantita.
Vantaggi della conversione in tempo reale
Questo strumento supporta la conversione in tempo reale e aggiorna i risultati istantaneamente quando i valori base cambiano. Permette di verificare rapidamente l'aspetto su diverse dimensioni e impostazioni di font.