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

Generatore di scale di tipo fluido

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 direttamente in modalità scala tipografica con una base di 16px e un rapporto di 1,25 (terza maggiore) già selezionato: un punto di partenza solido e ampiamente utilizzato per una scala tipografica. Solo da questi due numeri vengono generate sei dimensioni: piccola, base, h4, h3, h2 e h1, ciascuna con il proprio valore Fluid Clamp() anziché una singola dimensione fissa.

Ogni passaggio mantiene la dimensione di base ancorata allo stesso valore sia sul lato mobile che su quello desktop, mentre i titoli si ingrandiscono in modo più aggressivo sul viewport desktop più ampio rispetto a quello stretto su mobile: la stessa idea di scegliere un rapporto più delicato per schermi piccoli e uno più audace per schermi grandi, derivato automaticamente dal singolo rapporto scelto.

Cambiando il rapporto a 1.125, 1.2, 1.333 o 1.5 si rigenera istantaneamente l'intera tabella e il pulsante sottostante copia tutti e sei i valori clamp() come un blocco pronto da incollare di proprietà personalizzate CSS a cui fare riferimento il resto del foglio di stile.

🛡️
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.