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

Dimensione carattere fluido da 16px a 24px

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

Ridimensionare in modo fluido la dimensione del carattere da 16px a 24px è una delle domande più comuni nelle ricerche CSS clamp(), perché 16px è il valore predefinito quasi universale per il corpo del testo e 24px è un frequente passo avanti per un'intestazione o un paragrafo iniziale leggermente più grande. Questa pagina apre la calcolatrice con esattamente quella coppia precompilata rispetto a un intervallo di viewport da 320px a 1280px, quindi la riga clamp() è pronta nel momento in cui viene caricata.

Se hai bisogno solo dell'equivalente rem o em statico di 16px o 24px, senza alcun ridimensionamento basato sul viewport, il convertitore da px a rem risponde in un solo passaggio; questa calcolatrice è utile nel caso in cui il valore stesso debba cambiare gradualmente man mano che la finestra del browser si ridimensiona anziché rimanere fissa su un valore rem.

La suddivisione sottostante mostra esattamente come 16px e 24px si trasformano in una pendenza, un coefficiente vw e un'intersezione dell'asse y, e il cursore di anteprima dal vivo ti consente di trascinare nell'intervallo 320-1280px per vedere il testo crescere da una dimensione all'altra in tempo reale prima di copiare la linea CSS nel tuo 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.