Calcolatrice clamp() per font fluidi
Indica la dimensione minima, quella massima e tra quali larghezze di schermo deve crescere. La calcolatrice fa il conto della retta e ti consegna il clamp() pronto.
Come si usaDimensione fluida con clamp()
Nel mezzo del cammin di nostra vita.
Calcolatrice clamp() per font fluidi: a cosa serve
Con clamp() il testo cresce insieme alla larghezza dello schermo senza bisogno di tante media query: è piccolo su smartphone, grande su computer e cambia in modo graduale tra i due.
La calcolatrice fa il conto della retta tra la dimensione minima e quella massima nelle larghezze di schermo che scegli e restituisce il valore in rem, che rispetta il carattere impostato dalla persona. Mostra la dimensione a ogni larghezza comune e avvisa quando il massimo supera 2,5 volte il minimo, il punto oltre il quale lo zoom al 200% richiesto dalle WCAG 1.4.4 può smettere di funzionare.
Come si usa
- Inserisci le dimensioni minima e massima in px.
- Scegli tra quali larghezze di schermo cresce.
- Copia il clamp() pronto.
Quando usarlo
- Titoli che si adattano a smartphone e computer.
- Spaziature fluide tra le sezioni.
- Scala tipografica senza media query.
Domande frequenti
Come funziona clamp()?
clamp(minimo, preferito, massimo) usa il valore preferito finché resta tra i limiti. Il preferito è una retta, un valore in rem sommato a una frazione di vw, che cresce insieme alla larghezza dello schermo: su smartphone resta al minimo e su computer arriva al massimo.
Perché usare rem e non px?
rem segue la dimensione del carattere scelta dalla persona. Con i px, chi ha ingrandito il carattere predefinito per difficoltà di lettura non nota alcuna differenza.
Cos’è l’avviso sullo zoom?
Le WCAG richiedono che il testo possa essere ingrandito al 200%. Poiché la parte in vw non cresce con lo zoom, un massimo molto più grande del minimo può impedire questo ingrandimento. Una regola pratica sicura è che il massimo non superi 2,5 volte il minimo.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.