Categoria: Sviluppo
Generatore di CSS clamp
Dimensioni di carattere fluide senza media query
Indica una dimensione minima e una massima con le larghezze di viewport a cui appartengono e ottieni la dichiarazione clamp() che scala tra le due, con una tabella di ciò che viene reso alle larghezze più comuni.
font-size: clamp(1.125rem, 0.7826rem + 1.5217vw, 2rem);
| Larghezza del viewport | Dimensione resa |
|---|---|
| 360px | 18px |
| 768px | 24.21px |
| 1024px | 28.1px |
| 1280px | 32px |
| 1600px | 32px |
Anteprima
La tipografia fluida resta leggibile sul telefono e proporzionata sul desktop.
La dichiarazione viene costruita nella pagina. Non viene caricato nulla.
Tutto ciò che c'è in questa pagina viene elaborato nel tuo browser. Niente viene caricato.
A cosa serve
clamp() ha sostituito la pila di media query che un tempo faceva saltare un titolo tra quattro dimensioni. La parte scomoda è il termine centrale, che deve essere la retta passante per i tuoi due punti: una pendenza per il viewport più un'intercetta, scritta come valore vw sommato a uno in rem. Quel calcolo lo fa lo strumento. Entrambi i limiti restano in rem, così chi ha ingrandito il testo predefinito continua a vedere caratteri più grandi, e la tabella mostra la dimensione realmente resa a 360, 768, 1024, 1280 e 1600 pixel. Lo stesso valore serve per padding, gap e margini, non solo per il testo.
Come si usa
- Inserisci la dimensione più piccola e la larghezza di viewport in cui vale.
- Inserisci la dimensione più grande e la larghezza oltre cui non cresce.
- Copia la dichiarazione clamp() e controlla la tabella di anteprima.
Privacy
Questo strumento funziona interamente nel tuo browser. Quello che inserisci non viene mai caricato, salvato o condiviso: chiudendo la scheda sparisce.
Domande frequenti
- Perché i limiti sono in rem e non in px?
- Una dimensione espressa solo in unità di viewport ignora l'impostazione di dimensione del testo del browser, che è un difetto di accessibilità. I limiti in rem seguono la preferenza di ciascuno.
- Posso usarlo anche per le spaziature?
- Sì. Il valore è semplicemente una lunghezza, quindi funziona per padding, margin, gap, width e ogni proprietà che ne accetta una.
- Viene inviato qualcosa a un server?
- No. La dichiarazione è calcolata nella pagina dai numeri che digiti, ed è per questo che si aggiorna all'istante.