Generatore di clamp() CSS

Cos'è Generatore di clamp() CSS?

Il generatore di clamp() CSS è un calcolatore gratuito di tipografia fluida per sviluppatori front-end e designer. Gli fornisci una dimensione del carattere minima, una massima, una larghezza del viewport minima e una massima; restituisce una dichiarazione clamp(min, preferito, max) in cui il valore preferito combina un offset in rem con una pendenza in vw, così il testo cresce linearmente con lo schermo senza mai uscire dai tuoi limiti. Questo elimina le media query font-size impilate e mantiene titoli e testo del corpo adattivi su ogni dispositivo. Scegli una dimensione di anteprima per vedere come viene reso il valore, cambia l'unità di output tra rem e px e copia la riga direttamente nel tuo foglio di stile.

Come usare Generatore di clamp() CSS

1. Inserisci la dimensione del carattere minima — la dimensione che il testo deve avere sullo schermo più piccolo.
2. Inserisci la dimensione del carattere massima — la dimensione che il testo deve raggiungere sullo schermo più grande.
3. Imposta le larghezze del viewport minima e massima tra cui la dimensione deve scalare.
4. Apri le impostazioni per cambiare l'unità di output (rem mantiene l'accessibilità; è disponibile anche px), se preferisci.
5. Scegli una dimensione di anteprima per renderizzare un testo di esempio a quel viewport, poi leggi il valore clamp() in tempo reale.
6. Copia l'espressione clamp() generata e incollala nel tuo font-size CSS.

Esempi

font min 16, font max 20, vw min 320, vw max 1240

font-size: clamp(1rem, 0.913rem + 0.435vw, 1.25rem);

font min 32, font max 64, vw min 320, vw max 1536

font-size: clamp(2rem, 1.474rem + 2.632vw, 4rem);

font min 12, font max 14, vw min 480, vw max 1280

font-size: clamp(0.75rem, 0.675rem + 0.25vw, 0.875rem);

Domande frequenti

Come fa il valore clamp() a scalare senza media query?

clamp(min, preferito, max) prende un limite inferiore, un valore preferito (fluido) e un limite superiore. Il valore preferito è una retta della forma rem + vw, calcolata in modo che il carattere sia uguale al tuo minimo al viewport minimo e al tuo massimo al viewport massimo. Tra queste larghezze il browser interpola automaticamente, e al di fuori clamp() fissa la dimensione al limite più vicino — il tutto in un'unica dichiarazione.

Perché l'output è in rem invece che in px?

Usare rem per le parti fisse rispetta l'impostazione della dimensione del carattere del browser dell'utente, il che è meglio per l'accessibilità. La pendenza relativa al viewport è espressa in vw. Puoi cambiare l'unità in px nelle impostazioni se il tuo progetto richiede unità assolute, ma rem è il valore predefinito consigliato.

Quale intervallo di viewport dovrei usare?

Una scelta comune è la tua larghezza più piccola supportata (spesso 320px o 360px) per il minimo e il tuo contenitore di contenuto più largo (come 1240px–1536px) per il massimo. Il carattere è completamente fluido solo all'interno di quell'intervallo; al di sotto il testo resta al minimo e al di sopra al massimo.

Funziona per qualsiasi lunghezza CSS, non solo font-size?

Sì. Il valore clamp() generato è semplicemente una lunghezza, quindi puoi incollarlo in padding, margin, gap o qualsiasi proprietà che accetti una lunghezza. Le etichette menzionano font-size perché la tipografia fluida è l'uso più comune, ma la matematica è identica per le spaziature.

I miei dati vengono inviati da qualche parte?

No. Il calcolo viene eseguito interamente nel tuo browser con JavaScript — le tue dimensioni del carattere e larghezze del viewport non vengono mai caricate su alcun server, quindi lo strumento funziona in modo privato e persino offline una volta caricata la pagina.