| Unità | Confronta tutte le unità CSS, incluse px, em, rem, vw, vh, fr e altro. Include esempi, supporto browser e quando usare ogni unità. | |
|---|---|---|
pxAbsolute | Pixels — 1/96th of 1 inch on screen | |
ptAbsolute | Points — 1/72nd of 1 inch (print) | |
pcAbsolute | Picas — 12 points = 1 pica | |
cmAbsolute | Centimeters | |
mmAbsolute | Millimeters | |
inAbsolute | Inches (1in = 96px) | |
QAbsolute | Quarter-millimeters (1Q = 0.25mm) |
| Unità | Confronta tutte le unità CSS, incluse px, em, rem, vw, vh, fr e altro. Include esempi, supporto browser e quando usare ogni unità. | |
|---|---|---|
emRelative (font) | Relative to parent element's font-size | |
remRelative (font) | Relative to root (:root) font-size | |
chRelative (font) | Width of the '0' character in current font | |
exRelative (font) | Height of lowercase 'x' in current font | |
capRelative (font) | Cap height of current font | |
icRelative (font) | Advance measure of '水' (CJK ideograph) | |
lhRelative (font) | Line height of the element | |
%Relative (parent) | Percentage of parent element's value |
| Unità | Confronta tutte le unità CSS, incluse px, em, rem, vw, vh, fr e altro. Include esempi, supporto browser e quando usare ogni unità. | |
|---|---|---|
vwViewport | 1% of viewport width | |
vhViewport | 1% of viewport height | |
vminViewport | 1% of the smaller viewport dimension | |
vmaxViewport | 1% of the larger viewport dimension | |
svhViewport (dynamic) | Small viewport height (excludes mobile browser chrome) | |
dvhViewport (dynamic) | Dynamic viewport height (updates with browser chrome) | |
lvhViewport (dynamic) | Large viewport height (browser chrome hidden) | |
svw / dvw / lvwViewport (dynamic) | Small/Dynamic/Large viewport width variants |
| Unità | Confronta tutte le unità CSS, incluse px, em, rem, vw, vh, fr e altro. Include esempi, supporto browser e quando usare ogni unità. | |
|---|---|---|
cqwContainer | 1% of query container's inline size (width) | |
cqhContainer | 1% of query container's block size (height) | |
cqiContainer | 1% of container's inline size | |
cqbContainer | 1% of container's block size | |
cqminContainer | 1% of smaller container dimension | |
cqmaxContainer | 1% of larger container dimension |
| Unità | Confronta tutte le unità CSS, incluse px, em, rem, vw, vh, fr e altro. Include esempi, supporto browser e quando usare ogni unità. | |
|---|---|---|
frGrid | Fraction of available grid track space | |
min-contentGrid keyword | Smallest content fits without overflow | |
max-contentGrid keyword | Content's ideal unconstrained width | |
fit-content(N)Grid function | Clamps max-content to N maximum | |
minmax(N, M)Grid function | Track size between minimum N and maximum M |
Si adatta alla dimensione del font :root, rispetta le impostazioni del browser dell'utente, coerente tra i componenti
Evita px — non rispetta le preferenze di font dell'utente
rem per spaziatura globale coerente; em per spaziatura relativa alla dimensione del font del componente
Evita px per i componenti che scalano
% per contenitori fluidi; ch (45–75ch) per lunghezza ottimale della riga di testo
Evita px fisso per la larghezza del contenuto principale
dvh evita la sovrapposizione del chrome del browser mobile; vh va bene solo per desktop
Evita 100vh da solo su mobile — la barra URL taglia il contenuto
Distribuisce lo spazio rimanente proporzionalmente; più pulito di % nel grid
Evita di combinare fr con colonne px fisse ingenuamente
Rendering preciso al pixel; non ha bisogno di scalare con il testo
Nessuna necessità di unità relative qui
Usa rem per le dimensioni del font. rem è relativo alla dimensione del font dell'elemento radice (tipicamente 16px), rendendo facile scalare l'intera UI cambiando la dimensione del font radice. Questo rispetta anche le preferenze di dimensione del font del browser dell'utente, migliorando l'accessibilità. Usa px solo per bordi, ombre ed elementi che non devono scalare.
em è relativo alla dimensione del font dell'elemento padre, che può accumularsi negli elementi annidati. rem è relativo alla dimensione del font dell'elemento radice ('<'html>), rendendolo più prevedibile. Per le dimensioni del font, rem è generalmente preferito. em è utile per padding e margini che devono scalare con la dimensione del font del componente.
Usa vw/vh per elementi che devono essere dimensionati relativamente al viewport del browser (ad esempio, sezioni hero a schermo intero, modali). Usa le percentuali per elementi che devono essere dimensionati relativamente al loro contenitore padre. dvh (dynamic viewport height) è preferito a vh su mobile dove la barra degli indirizzi influisce sull'altezza.
Le unità di container query (cqw, cqh, cqi, cqb) sono relative alle dimensioni di un elemento contenitore piuttosto che al viewport. Richiedono un contesto contenitore (container-type: inline-size). Sono ideali per componenti veramente responsivi che devono adattarsi alle dimensioni del loro contenitore indipendentemente dalle dimensioni del viewport.