Le unità CSS si dividono in assolute (fisse) e relative (scalabili con qualcosa). Scegliere bene è fondamentale per layout reattivi e accessibili.
.x { width: 100px; } /* px — fixed pixels; predictable, doesn't scale */
Usa per elementi che non devono scalare (bordi, piccoli dettagli fissi).
pxfont-size: 1.5rem; /* rem — relative to the ROOT font-size (html). Consistent. */
font-size: 1.2em; /* em — relative to the PARENT's font-size. Compounds! */
width: 50%; /* % — relative to the parent's size */
width: 50vw; /* vw — 50% of viewport WIDTH */
height: 100vh; /* vh — 100% of viewport HEIGHT */
html { font-size: 16px; }
.parent { font-size: 20px; }
.parent .child { font-size: 2em; } /* 2 × 20 = 40px (relative to parent) */
.parent .other { font-size: 2rem; } /* 2 × 16 = 32px (relative to root) */
em si accumula attraverso l'annidamento (un figlio di un figlio si moltiplica), il che può diventare inaspettato. rem riferisce sempre alla radice, quindi è prevedibile — la scelta ideale per dimensioni di font e spaziature. Usa em quando vuoi dimensionamento relativo al font locale (ad es. padding su un pulsante che scala con il suo testo).
font-size: 16px; /* ❌ ignores the user's browser font-size preference */
font-size: 1rem; /* ✅ scales when the user increases their default size */
Usare rem per il testo rispetta gli utenti che impostano un font più grande per impostazione predefinita — un vero vantaggio di accessibilità che px compromette.
L'unità giusta rende layout reattivi e accessibili: rem per testo/spaziature (prevedibile + rispetta le impostazioni utente), %/vw/vh per layout fluido, px per dettagli fissi, e em per dimensionamento relativo al locale.
Le più recenti unità viewport (dvh, svh) risolvono anche i problemi di altezza della barra degli indirizzi su mobile.