Generatore CSS clamp()
Genera un valore CSS clamp() fluido che si adatta dolcemente tra due larghezze di viewport.
Generatore CSS clamp()
La tipografia fluida e la spaziatura adattiva permettono di scalare i valori in modo fluido al ridimensionamento del viewport, anziché saltare tra dimensioni fisse a pochi media query. Questo strumento costruisce quel valore per te: inserisci una dimensione minima e massima, insieme alle larghezze di viewport dove si applicano, e otterrai una funzione CSS clamp() con un'interpolazione lineare nel mezzo, pronta per incollare nel tuo foglio di stile.
La dimensione minima e massima definiscono i due estremi della scala; la larghezza minima e massima del viewport definiscono dove si applica ciascun estremo — sotto la larghezza minima il valore rimane al suo minimo, sopra il massimo rimane al suo massimo, e nel mezzo cresce linearmente con il viewport. L'opzione di unità cambia l'output tra px e rem, la dimensione del font di base controlla la conversione px-a-rem, e le cifre decimali controllano la precisione dei numeri generati. Il formato di output racchiude lo stesso clamp() come una dichiarazione semplice, una proprietà CSS personalizzata, o una classe di valore arbitrario Tailwind, così puoi inserirlo direttamente nel tuo codice.
Attivare il controllo dell'accessibilità aggiunge una nota quando la configurazione potrebbe causare problemi: il dimensionamento in px ignora la preferenza di dimensione del carattere del browser del lettore, e un minimo troppo piccolo rimane difficile da leggere anche prima di iniziare a scalare. Entrambi sono errori comuni nelle formule di tipografia fluida scritte manualmente, e lo strumento li segnala invece di lasciarli passare silenziosamente.
Tutti i calcoli avvengono nel tuo browser mentre regoli le opzioni — nulla di quello che inserisci viene inviato da nessuna parte. Quando il risultato ti sembra giusto, copialo, scaricalo come file .txt, o invialo all'input di un altro strumento per continuare a lavorarci.