Design / Responsive
Generatore CSS clamp() per tipografia e spaziatura fluide
Inserisci la dimensione minima e massima e le larghezze del viewport a cui si applicano: otterrai un’espressione clamp() in rem, con una tabella delle dimensioni alle larghezze dello schermo più comuni.
Generatore CSS clamp() per tipografia e spaziatura fluide: Lo strumento traccia una linea retta tra i due punti: da 16 px con un viewport di 320 px a 24 px con un viewport di 1280 px, la dimensione cresce di 0,8333 px ogni 100 px di larghezza. La linea viene scritta come una parte fissa in rem più una parte in vw, 0.8333rem + 0.8333vw, mentre clamp() la mantiene tra 1rem e 1.5rem al di fuori di quell’intervallo. Funziona al 100% localmente nel browser, senza caricare file sul server.
- Categoria
- Strumenti per sviluppatori
- Esecuzioni
- Nel browser
- Costo
- Gratuito · senza registrazione
- Disponibilità
- Pronto all'uso
Funziona interamente nel browser
CSS
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
| Larghezza della viewport | Dimensione |
|---|---|
| 320 px | 16 px |
| 375 px | 16,46 px |
| 768 px | 19,73 px |
| 800 px | 20 px |
| 1024 px | 21,87 px |
| 1280 px | 24 px |
| 1440 px | 24 px |
| 1920 px | 24 px |
Il valore centrale di clamp() è una linea retta che passa per i due punti indicati: aggiunge una quantità fissa in rem a una parte della larghezza della viewport, così la dimensione varia gradualmente tra le due larghezze e si arresta ai limiti al di fuori di esse. Usare rem per la parte fissa mantiene la dimensione adattabile all'impostazione della dimensione del carattere del lettore. Funziona con qualsiasi lunghezza: dimensioni dei caratteri, padding, spaziature o margini.
Esempio svolto
Per un titolo di 32 px su un telefono da 375 px e di 48 px su un desktop da 1440 px, la pendenza è 16 ÷ 1065 = 1,5023 px per 100 px e l'espressione è clamp(2rem, 1.6479rem + 1.5023vw, 3rem). Su un tablet da 800 px il titolo misura 38,38 px.
Accessibilità
WCAG richiede che il testo possa essere ingrandito al 200%. Poiché una parte delle dimensioni fluide dipende dalla viewport, pendenze molto ripide possono impedire allo zoom di ingrandire il testo abbastanza; mantieni la dimensione massima a non più di circa 2,5 volte quella minima e usa il generatore di scale tipografiche per scegliere passaggi coerenti.
Come usarlo
- Inserisci la dimensione minima e massima in px.
- Inserisci le larghezze del viewport a cui devono applicarsi.
- Copia il valore clamp() e controlla le dimensioni nella tabella.
Privacy e limitazioni
Il calcolo viene eseguito nel tuo browser.
Strumenti correlati
Domande frequenti
Perché non usare semplicemente vw?
Una dimensione espressa solo in vw ignora l’impostazione della dimensione del carattere del lettore e può diventare minuscola sui telefoni o enorme sugli schermi larghi. La parte in rem e i limiti di clamp() risolvono entrambi i problemi.
clamp() funziona ovunque?
Sì: tutti i browser attuali supportano clamp() dal 2020.
La dimensione può diminuire sugli schermi più larghi?
Sì: inserisci una dimensione maggiore per la larghezza minima e l’espressione sottrarrà invece la parte in vw.
Strumento gratuito · nel browser esecuzioni · senza account