⭐ 0
🔍
Testo Immagine PDF e Documenti Audio Musica Elettronica Tempo Utilità Validatori Esoterismo Giochi

Generatore di dimensioni dei caratteri fluidi Clamp()

Calcola un valore CSS clamp() reale e fluido da una dimensione minima e massima su due larghezze del viewport, con la pendenza e l'intersezione mostrate passo dopo passo e un'anteprima di ridimensionamento in tempo reale.

Elaborazione... 0%

Risultato

Questa pagina apre la calcolatrice con un'impostazione fluida per la dimensione del carattere generica già compilata: 16px in un viewport di 320px fino a 24px in un viewport di 1280px. Si tratta di un intervallo comodo da corpo a leggermente più ampio che si adatta facilmente da un tipico schermo del telefono a una tipica finestra del desktop, ed è la configurazione che la maggior parte delle persone intende quando cerca in primo luogo un morsetto fluido per la dimensione del carattere().

I quattro numeri sono aperti al cambiamento: aumentare la dimensione massima per un'intestazione piuttosto che per il corpo del testo o restringere l'intervallo del viewport se il design deve solo flettersi tra un tablet e un punto di interruzione del desktop. Qualunque cosa tu inserisca, la pendenza e l'intersezione dell'asse y vengono ricalcolate allo stesso modo e mostrate come aritmetica esplicita, non nascoste all'interno della riga finale.

Sotto i quattro input, un dispositivo di scorrimento della larghezza del viewport guida un'anteprima dal vivo in modo che il ridimensionamento sia immediatamente visibile e la riga clamp() pronta per la copia è a un clic di distanza. Cambiando l'unità di output tra rem e px si ricalcola ogni numero senza toccare i valori di dimensione minima e massima stessi.

🛡️
Eseguito nel browser

I tuoi file e input non lasciano mai questo dispositivo. L'elaborazione viene eseguita completamente offline. Sicuro al 100%.

Formati e regole accettati

  • Matematica reale della tipografia fluida: pendenza, coefficiente vw e intersezione dell'asse y mostrati esplicitamente, non solo la riga finale clamp().
  • Anteprima dal vivo: trascina il cursore della larghezza della finestra per vedere il testo di esempio ridimensionarsi esattamente come farebbe mentre viene ridimensionata una finestra del browser reale.
  • Modalità type-scale: una dimensione di base e un rapporto compreso tra 1,125 e 1,5 generano sei passaggi fluid clamp() — small, base, h4, h3, h2, h1 — come CSS pronto per la copia.

Vantaggi principali

✓ La linea clamp(), i numeri di pendenza e di intersezione e l'anteprima dal vivo si aggiornano tutti durante la digitazione: nessun pulsante da premere.
✓ Un dispositivo di scorrimento della larghezza della finestra guida una casella di anteprima dal vivo, in modo da poter vedere l'esatto ridimensionamento fluido in azione tra i punti di interruzione minimo e massimo, non solo una formula.
✓ Una modalità di scala di tipo separata trasforma una dimensione di base e un rapporto in una scala di intestazione fluida completa in 6 passaggi, pronta come blocco di proprietà personalizzate CSS.

Casi d'uso

  • • Trasforma la dimensione minima/massima del carattere e l'intervallo del viewport in una vera linea clamp() (pendenza, coefficiente vw e intersezione inclusi) invece di osservarne una da un tutorial.
  • • Trascina il cursore della larghezza della finestra per visualizzare in anteprima un'intestazione fluida o il ridimensionamento delle dimensioni del corpo esattamente come farebbe quando viene ridimensionata una finestra del browser reale, prima di inserirla in un foglio di stile.
  • • Genera una scala completa di tipo fluido in 6 fasi (da piccolo a h1) da una dimensione e un rapporto di base, copiati come un blocco pronto da incollare di proprietà personalizzate CSS.
  • • Costruisci un fluido clamp() per la spaziatura (margine, riempimento, spazio) anziché per la dimensione del carattere: la stessa formula di pendenza/intersezione si applica a qualsiasi proprietà CSS.