Generatore CSS clamp()
Genera una dimensione fluida CSS clamp() (tipografia responsive) tra due larghezze schermo.
- Istantaneo
- Gratis
- Privato (elaborato localmente)
- Senza registrazione
Una dimensione che segue lo schermo
Indica la dimensione min e max e le larghezze schermo corrispondenti: lo strumento calcola il valore clamp() da incollare nel CSS, con un’anteprima che reagisce alla larghezza della finestra.
-
Dimensione min / max
Es. 16px a 24px.
-
Schermi di riferimento
Es. 320px a 1280px.
-
Copia il clamp()
In font-size, padding, ecc.
Esempio: 16 → 24px (320 → 1280px)
| Voce | Valore |
|---|---|
| Dimensione min / max | 16px / 24px = 1rem / 1.5rem |
| Schermi | 320px → 1280px |
| Pendenza fluida | 0.833vw |
| Risultato | clamp(1rem, 0.833rem + 0.833vw, 1.5rem) |
A 320px la dimensione è 16px, a 1280px è 24px, e varia linearmente nel mezzo. Calcolo 100% locale.
Domande frequenti
A cosa serve clamp()?
La funzione CSS clamp(min, preferito, max) vincola un valore tra un minimo e un massimo, con un valore preferito che si adatta alla larghezza dello schermo. È il modo moderno di fare dimensioni di carattere fluide senza media query.
Come si calcola il valore preferito?
Si traccia una retta tra (larghezza min, dimensione min) e (larghezza max, dimensione max). La parte centrale combina una base fissa in rem e una pendenza in vw, ad es. 0.833rem + 0.833vw, vincolata dai min/max in rem.
Perché mescolare rem e vw?
Il vw fa crescere la dimensione con la larghezza del viewport (fluidità); il rem aggiunge una base fissa così la pendenza non parte da zero. La combinazione dà una crescita lineare e leggibile, che rispetta lo zoom utente.
Devo tenere min e max?
Sì. Senza limiti il testo sarebbe minuscolo su schermi piccoli ed enorme su quelli molto grandi. clamp() blocca il valore fuori dal tuo intervallo di larghezze di riferimento.