Trascina uno slider della larghezza del viewport e guarda calc(), min(), max() e clamp() trasformarsi in pixel. In più vh vs svh, lvh e dvh, fit-content e min-content dal vivo, gap e ricette per la tipografia fluida.
Le funzioni matematiche CSS permettono a un valore di adattarsi allo schermo. calc() combina unità diverse, come in calc(100% - 2rem). min() sceglie l'opzione più piccola, quindi width: min(100%, 640px) non trabocca mai. max() sceglie la più grande, e clamp(min, preferred, max) mantiene un valore fluido tra due limiti. dvh segue la barra degli strumenti variabile del browser mobile, a differenza del semplice vh.
Quale funzione per quale compito
Compito
CSS
Larghezza piena meno un margine fisso
width: calc(100% - 2rem)
Una colonna che si ferma a 640px
width: min(100%, 640px)
Padding che non scende mai sotto 1rem
padding: max(1rem, 4vw)
Titolo che scala tra 2rem e 3.5rem
font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem)
Hero che riempie lo schermo mobile visibile
min-height: 100dvh
Invece di ridimensionare il browser per provare una formula, trascina la larghezza del viewport simulato e ogni funzione si risolve in pixel davanti a te, con il punto in cui clamp() raggiunge i suoi limiti evidenziato. La pagina disegna anche cosa misurano vh, svh, lvh e dvh su un telefono e mostra le parole chiave intrinseche all'opera su box reali.
Trascina lo slider della larghezza del viewport dalla dimensione di un telefono fino a un monitor largo.
Regola i valori minimo, preferito e massimo della formula clamp() e osserva il risultato in pixel.
Confronta le righe di min(), max() e calc() risolte alla stessa larghezza.
Copia la formula, poi prova i box di dimensionamento del contenuto e gli esempi di gap qui sotto.
Gli spazi attorno a + e - dentro calc() sono obbligatori. calc(100%-2rem) non è valido; calc(100% - 2rem) funziona.
Tieni un termine in rem nel mezzo di un clamp() per font fluidi, così il testo risponde ancora quando chi legge fa zoom o cambia la dimensione predefinita.
All'inizio min() e max() sembrano al contrario: min() imposta una dimensione massima, perché prende sempre il valore più piccolo.
Usa dvh per le sezioni a schermo intero con moderazione, perché il suo valore cambia quando la barra degli strumenti si muove e può spostare il contenuto durante lo scroll. svh è la scelta stabile.
Domande frequenti
Qual è la differenza tra vh, svh, lvh e dvh?
Sui telefoni la barra degli strumenti del browser si allunga e si accorcia. svh è l'1% del viewport piccolo, con la barra visibile. lvh è l'1% del viewport grande, con la barra nascosta. dvh segue quello attuale e si aggiorna mentre scorri. Il classico vh di solito equivale a lvh, ed è per questo che le sezioni da 100vh vengono tagliate su mobile.
clamp(), min() e max() sono supportati ovunque?
Sì, tutte e tre funzionano in ogni browser principale dal 2020. Le unità di viewport small, large e dynamic sono arrivate più tardi, nel corso del 2022, e ora sono presenti in tutti i principali browser attuali. Aggiungi prima una riga di riserva con semplice vh se supporti ancora dispositivi più vecchi.
Come scrivo una dimensione di font fluida con clamp()?
Scegli la dimensione su uno schermo stretto e su uno schermo largo, poi scrivi clamp(small, preferred, large). Il valore preferito combina rem e vw, come 1rem + 2vw, così la dimensione cresce con la finestra ma resta tra i due limiti. Il laboratorio qui sotto mostra le larghezze esatte in cui subentrano i limiti.
Cosa fa fit-content?
width: fit-content dimensiona un box sul suo contenuto, come un inline-block che si stringe attorno al contenuto, ma mai più largo dello spazio disponibile. Equivale a min(max-content, max(min-content, available space)). La funzione fit-content() nelle tracce grid fa lo stesso con un limite che scegli tu.
Si può usare gap con flexbox?
Sì. gap, row-gap e column-gap funzionano nei contenitori flex in tutti i browser attuali, non solo in grid. Il gap viene aggiunto solo tra gli elementi, mai sui bordi esterni, il che è più semplice dei margini su ogni figlio.
Come si risolve calc()
calc() aspetta il momento del layout per risolversi, quindi può combinare una percentuale che dipende dal genitore con un valore in rem o in pixel. Puoi annidare calc() dentro min(), max() e clamp() e usare custom property al suo interno, come calc(var(--gutter) * 2).
Moltiplicazione e divisione richiedono almeno un numero semplice: calc(2 * 1rem) va bene, calc(1rem * 1rem) no. Una divisione per zero rende la dichiarazione non valida.
Dimensioni intrinseche: min-content, max-content e fit-content
min-content è la larghezza minima che un box può avere senza traboccare, di solito la larghezza della sua parola più lunga o dell'immagine più larga. max-content è la larghezza che avrebbe se il testo non andasse mai a capo. Entrambe sono utili per le tracce grid e per le etichette che devono aderire al loro testo.
fit-content si colloca tra le due: è largo quanto il contenuto richiede ma va a capo quando il contenitore è più stretto. Questo lo rende un modo pulito per centrare un box aderente al contenuto con margin-inline: auto.
Spaziatura fluida oltre alla tipografia fluida
Lo stesso trucco con clamp() funziona per padding, margini e gap. Una sezione con padding-block: clamp(2rem, 6vw, 6rem) respira sugli schermi grandi senza sprecare spazio su un telefono.
Definisci i valori fluidi una sola volta come custom property, per esempio --space-m e --step-2, e usali ovunque. Cambiare la scala in seguito significherà modificare una riga invece di cercare tra i componenti.
vh vs svh, lvh e dvh
Unità in percentuale del viewport
Unità
1 unità equivale a
Cambia durante lo scroll?
Usala per
vh / vw
1% del viewport (su mobile, di solito quello grande)
No
Layout desktop, riserva per browser più vecchi
svh / svw
1% del viewport piccolo, barre visibili
No
Sezioni a schermo intero che non devono mai essere nascoste
lvh / lvw
1% del viewport grande, barre nascoste
No
Sfondi che devono coprire tutto
dvh / dvw
1% del viewport attuale
Sì
Layout che devono seguire la barra degli strumenti
vmin / vmax
1% del lato più corto o più lungo
No
Elementi quadrati che si adattano a entrambi gli orientamenti
cqi / cqw
1% della dimensione inline di un size container
Con il contenitore
Componenti dentro le container query
Un hero a tutta altezza sicuro su mobile
La prima riga è la riserva per i browser senza le unità più recenti. La seconda la sovrascrive dove sono supportate.
Esempi di calc(), min(), max() e clamp()
Una colonna leggibile senza media query
min() limita la larghezza; il padding usa max() così non scende mai sotto 12px. Entrambe le regole si adattano da sole alla larghezza del riquadro.
calc() per una sidebar fissa accanto a un'area principale fluida
L'area principale prende tutto ciò che resta dopo la sidebar da 120px e il gap da 12px.
min-content, max-content e fit-content
Parole chiave di dimensionamento intrinseco
Parola chiave
La larghezza diventa
Tailwind
La parola indivisibile più lunga o l'immagine più larga
Tutto il contenuto su una riga, anche se trabocca
max-content, ma non più largo dello spazio disponibile
fit-content(300px) in grid
Come fit-content con un tetto di 300px
grid-cols-[fit-content(300px)_1fr]
gap in flex e grid
Lo stesso gap in una riga flex che va a capo e in una grid
row-gap e column-gap possono essere diversi. Nessuno dei due aggiunge spazio sui bordi esterni.
Scala fluida per tipografia e spaziatura
Una piccola scala fluida come custom property
Ogni gradino cresce tra un telefono da circa 360px e un desktop da 1280px. Modifica i numeri nel laboratorio qui sopra.
Laboratorio del viewport
Larghezza del viewport simulato (px)
Titolo fluido a {px}px
Valori risolti alla larghezza simulata
Funzione
Dichiarazione
A {vp}px
minimo di clamp (rem)
massimo di clamp (rem)
preferito: parte in rem
preferito: parte in vw
Il massimo è inferiore al minimo, quindi vince il minimo a ogni larghezza.
Resta a {min}rem fino a circa {from}px di larghezza, cresce fino a circa {to}px, poi si ferma a {max}rem.
Senza una parte in vw il valore non cambia mai con la finestra.
Copia
Cosa copre 100 di ogni unità su un telefono
Tre telefoni: 100svh riempie lo spazio tra le barre visibili, 100lvh riempie tutto lo schermo come se le barre fossero nascoste, 100dvh segue le barre mentre cambiano
barre visibili
barre nascoste
segue le barre
Le fasce grigie sono le barre del browser. Il blu è l'area riempita da 100 unità.
Dimensionamento del contenuto, dal vivo
Parola chiave della larghezza
Spazio disponibile (px)
Consegna gratuita su ogni ordine questo fine settimana