Sfoglia ogni unità CSS — assolute (px, cm, pt), relative al font (em, rem, ch), viewport (vw, dvh), container-query, griglia (fr), angolo, tempo e risoluzione — in un riferimento ricercabile e filtrabile per tipo con una descrizione, una nota "quando usarla" e token pronti da copiare. Nel browser, gratuito.

Ogni unità CSS, spiegata. Tutto funziona nel tuo browser da un riferimento integrato — nulla viene inviato al server.

Nessuna unità corrisponde alla ricerca.
Prova un'unità o una categoria diversa — ad esempio rem, dvh, fr o angolo.

Informazioni su Riferimento unità CSS

Il Riferimento delle Unità CSS documenta ogni unità offerta dal linguaggio — 45 in totale — organizzate per tipo: unità assolute come px, cm e pt; unità relative al font come em, rem, ch e lh; unità di viewport da vw e vh fino alle più recenti svh, lvh e dvh; unità per container query come cqw e cqi; l'unità fr per la griglia; oltre ad angolo, tempo, risoluzione e percentuale.

Ogni scheda offre più di una semplice definizione: il token dell'unità in monospazio copiabile, il suo nome completo, la sua categoria, una descrizione in linguaggio semplice di come viene calcolata e una nota pratica "quando usarla" che indica dove l'unità si dimostra utile — e dove ne conviene un'altra.

La ricerca corrisponde a token, nomi e significati, così rem, larghezza del viewport e root trovano tutte le loro unità, e i chip per tipo filtrano la griglia in un'unica famiglia. Tutto funziona nel tuo browser a partire da un riferimento integrato, senza nulla inviato a un server.

Come usare Riferimento unità CSS

  1. Cerca un'unità per token, nome o significato — per esempio rem, larghezza del viewport o angolo.
  2. Usa i chip per tipo per filtrare la griglia su unità assolute, relative al font, di viewport, di container, di griglia, di angolo, di tempo, di risoluzione o percentuali.
  3. Leggi la descrizione di ogni unità e la sua nota "quando usarla" per scegliere quella giusta.
  4. Clicca il pulsante di copia per ottenere il token dell'unità per il tuo foglio di stile.

Domande frequenti

Usa rem per le dimensioni dei font e per qualsiasi cosa debba scalare con la dimensione di testo preferita dall'utente — rem segue la dimensione del font radice, così le impostazioni di accessibilità del browser funzionano. Usa px per gli elementi che devono restare otticamente costanti, come i bordi sottilissimi.

em è relativo alla dimensione del font dell'elemento corrente, quindi gli elementi annidati compongono il valore; rem è sempre relativo all'elemento radice, dando risultati prevedibili. Ecco perché rem è diventata la scelta predefinita per spaziature e scale tipografiche.

I browser mobili mostrano e nascondono le loro barre degli strumenti, cambiando l'altezza visibile, mentre vh resta fisso alla dimensione di layout più grande. L'unità dinamica dvh segue l'altezza visibile effettiva mentre le barre si spostano, e svh/lvh si ancorano rispettivamente allo stato più piccolo e più grande.

fr distribuisce lo spazio libero di un contenitore griglia per frazione: grid-template-columns: 2fr 1fr dà alla prima colonna il doppio della larghezza residua della seconda, dopo aver sottratto tracce fisse e gap. Esiste solo dentro le definizioni delle tracce della griglia.

Dimensionano gli elementi rispetto al loro contenitore query più vicino anziché al viewport: cqw è l'1% della larghezza del contenitore, cqi l'1% della sua dimensione inline. Permettono a un componente di scalare in base al box in cui si trova, indipendentemente dalla dimensione dello schermo.

Sì. Tutte le 45 unità sono documentate gratuitamente in una pagina che funziona interamente nel tuo browser — nessuna registrazione, nessuna richiesta al server.

Hai bisogno di aiuto?
Hai riscontrato un problema con questo strumento? Faccelo sapere.
Segnala un problema

Aggiungi questo strumento gratuito al tuo sito web — copia e incolla il codice qui sotto.