Testo che scala senza media query
Un titolo di 16 px sul telefono e 32 px sul desktop richiedeva un tempo due o tre breakpoint. Con clamp() basta una riga: la dimensione cresce in modo fluido con lo schermo tra un minimo e un massimo. La parte difficile è il valore centrale, un mix di una dimensione fissa e di una percentuale della larghezza dello schermo. Questo generatore lo calcola a partire dalle due dimensioni che ti interessano.
Ottieni un valore clamp() in quattro passaggi
- Inserisci la dimensione minima e quella massima, per esempio 16 e 32.
- Inserisci le larghezze dello schermo a cui valgono, per esempio 320 e 1280 pixel.
- Scegli px o rem e, se il tuo sito cambia la dimensione del font radice, i pixel di 1rem. Scegli la proprietà CSS per avere una dichiarazione pronta.
- Copia il valore o la dichiarazione. La tabella e il cursore mostrano la dimensione a qualsiasi larghezza intermedia.
Che cosa fanno le tre parti di clamp()
Il risultato assomiglia a clamp(1rem, 0.6667rem + 1.6667vw, 2rem). Il primo valore è la dimensione più piccola che la proprietà può assumere, l’ultimo la più grande e quello centrale la retta che li collega. Lo strumento calcola la pendenza come differenza di dimensione divisa per differenza di larghezza e la parte fissa da dove la retta incrocia una larghezza dello schermo pari a zero. Se la dimensione deve diminuire sugli schermi grandi, lo strumento mette per primo il valore minore, perché clamp() si aspetta sempre prima il minimo.
Con rem lo zoom continua a funzionare
Le dimensioni in rem seguono la dimensione del font impostata dal visitante nel browser, i valori in px no. Una dimensione solo in vw ignora del tutto lo zoom, e può non superare i controlli di accessibilità. Combinare una parte in rem con quella in vw, come fa questo strumento per le dimensioni in rem, mantiene il testo ingrandibile. Prova il tuo design con zoom al 200 % e non lasciare che la dimensione massima superi circa due volte e mezza la minima.
Nulla lascia il tuo browser
I valori vengono calcolati nella pagina. Il generatore non fa richieste di rete e non salva nulla.