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

Generatore di morsetti di spaziatura fluidi()

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

CSS clamp() funziona esattamente allo stesso modo per la spaziatura e per la dimensione del carattere: la proprietà sembra essere margine, riempimento o gap invece della dimensione del carattere. Questa pagina apre la calcolatrice con un intervallo compreso tra 8px e 32px su un viewport da 320px a 1280px, un passaggio comune per il riempimento di sezioni o spazi tra le schede che dovrebbero risultare stretti su un telefono e spaziosi su un desktop senza una query multimediale in vista.

Alla matematica sottostante non interessa cosa rappresentano i numeri: la stessa formula di pendenza e di intersezione dell'asse y che produce una dimensione di intestazione fluida produce un valore di spaziatura fluida, quindi la suddivisione seguente mostra esattamente come 8px e 32px si trasformano in una linea clamp() pronta per la copia per il riempimento: clamp(...).

Trascina il cursore della larghezza della finestra per visualizzare in anteprima come si sentirebbe la spaziatura a qualsiasi larghezza tra i due punti di interruzione, regola i valori minimo e massimo per un intervallo più stretto o più ampio e copia la linea finita direttamente nella proprietà di spaziatura che lo richiede.

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