CSS Clamp Generator
Genera valori CSS clamp() fluidi per font-size con anteprima live e generatore scala.
① Imposta dimensioni min/max e viewport ② Clicca Genera ③ Copia il valore CSS clamp()
Cos'è CSS clamp() per la tipografia fluida?
La funzione CSS clamp(min, preferito, max) abilita una tipografia veramente fluida che si scala tra due larghezze di viewport senza breakpoint. Il valore preferito combina un'unità relativa al viewport (vw) e un offset rem, calcolati in modo che la dimensione del font corrisponda esattamente al minimo al viewport minimo e al massimo al viewport massimo. Questa tecnica produce una singola dichiarazione CSS che sostituisce multiple regole @media.
Domande frequenti
CSS clamp(min, preferito, max) accetta tre argomenti. Il min è il valore più piccolo possibile, il preferito è il valore ideale (di solito una espressione vw + rem), e il max è il limite superiore. Il browser mantiene sempre il risultato tra min e max.
La pendenza è (maxDimensione - minDimensione) / (maxViewport - minViewport). Moltiplicata per 100 dà il coefficiente vw. L'intercetta rem è (minDimensione - pendenza × minViewport) / rootSize. Il clamp finale è: clamp(minRem, coeffVw + interceptaRem, maxRem).
Le media query producono salti bruschi ai breakpoint definiti. clamp() produce un'interpolazione lineare tra due dimensioni su tutto l'intervallo di viewport. Non servono breakpoint, il codice è più corto e il risultato è visivamente più raffinato.
Per CSS vanilla, dichiara i valori come proprietà custom in :root (es. --text-lg: clamp(1.125rem, 1.5vw + 0.75rem, 2rem)). Per Tailwind v3, aggiungili in theme.extend.fontSize. Per Tailwind v4, usa @theme nel file CSS.
CSS clamp() è supportato da tutti i browser principali dal 2020. Il supporto globale supera il 97%. Per browser legacy, genera un fallback solo in px da posizionare prima della dichiarazione clamp().
clamp() funziona per qualsiasi proprietà lunghezza che beneficia di scalatura fluida. Per tipografia elimina @media per font-size. Per spaziatura crea layout proporzionali. Evitalo dove serve controllo brusco.
Problemi comuni: (1) Root font size sbagliata — se l'utente imposta un rem base diverso, l'intercetta sarà errata. (2) Unità miste senza conversione. (3) Min maggiore del max. (4) Coefficiente vw molto grande. Testa sempre con il simulatore viewport.