Cos’è clamp() e perché usarlo
Con le media query la dimensione di un titolo salta da un valore all’altro a ogni breakpoint. clamp() fa qualcosa di più naturale: il valore cresce in modo continuo con la larghezza della finestra, ma non scende mai sotto un minimo e non supera mai un massimo. Una riga sola sostituisce una serie di media query.
La funzione accetta tre argomenti: clamp(minimo, preferito, massimo). La parte difficile è il valore preferito, una combinazione di rem e vw che deve valere esattamente il minimo alla larghezza minima del viewport e il massimo a quella massima. Questo generatore fa il calcolo per te: inserisci valore minimo e massimo, larghezza minima e massima del viewport e ottieni un risultato come clamp(1rem, 0.5rem + 2.5vw, 2rem).
Puoi lavorare in px o in rem, con la dimensione del font radice configurabile (16px di default). Usare rem nel risultato è importante per l’accessibilità: se l’utente aumenta la dimensione del testo nel browser, il valore si adatta. Lo strumento mostra anche pendenza e intercetta della formula, così capisci da dove vengono i numeri.
Scegli le larghezze del viewport in base al tuo layout reale: di solito la minima corrisponde al telefono più stretto che vuoi supportare e la massima alla larghezza massima del contenitore, oltre la quale il testo non deve più crescere. Con una scala fluida coerente, i titoli restano proporzionati su ogni schermo.
Un cursore del viewport ti fa vedere la dimensione calcolata a qualsiasi larghezza. Oltre ai font, clamp() funziona benissimo per padding, gap e margini fluidi. Tutto avviene nel tuo browser e il generatore è gratuito, senza limiti.
Come generare un valore clamp()
- Inserisci il valore minimo e il valore massimo (per esempio 16 e 32 px).
- Inserisci la larghezza minima e massima del viewport in cui il valore deve crescere.
- Scegli l’unità (px o rem) e, se serve, la dimensione del font radice.
- Muovi il cursore del viewport per vedere la dimensione calcolata a ogni larghezza.
- Copia il CSS clamp().
Dove usare clamp()
- Titoli h1 e h2 che scalano dal mobile al desktop.
- Una scala tipografica fluida per tutto il sito.
- Padding delle sezioni che crescono con lo schermo.
- Gap di griglie e flexbox fluidi.
- Margini e larghezze massime di contenitori.
La formula di clamp(), passo per passo
- Pendenza = (valore max − valore min) / (viewport max − viewport min).
- Intercetta = valore min − pendenza × viewport min.
- Valore preferito = intercetta (in rem) + pendenza × 100 vw.
- Esempio: da 16px a 32px tra 320px e 960px. Pendenza = 16 / 640 = 0,025 → 2,5vw. Intercetta = 16 − 0,025 × 320 = 8px = 0,5rem.
- Risultato: clamp(1rem, 0.5rem + 2.5vw, 2rem).
Domande Frequenti
È gratis?
Sì. Il generatore di clamp() è gratuito e senza limiti: anteprima e copia del CSS quante volte vuoi.
Perché usare rem invece di px?
Con i rem il valore rispetta la dimensione del testo scelta dall’utente nel browser. Un clamp() solo in px e vw ignorerebbe quell’impostazione.
Posso usare clamp() per gli spazi?
Sì. Funziona per qualsiasi proprietà che accetta una lunghezza: padding, margin, gap, width e così via.
clamp() è supportato da tutti i browser?
Sì, tutti i browser moderni supportano clamp().
Cosa succede fuori dall’intervallo del viewport?
Sotto la larghezza minima il valore resta al minimo, sopra la massima resta al massimo.