Vai al contenuto principale
LibraTool logoLibraTool

Generatore CSS clamp() gratis

Genera un valore CSS clamp() fluido per tipografia e spaziatura responsive. Imposta dimensioni minima/massima e intervallo di viewport, visualizza un'anteprima live e copia il CSS in un'unica riga.

Funziona offline una volta caricato
Unità di output:
Valore CSS
font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);
Classe Tailwind
text-[clamp(1rem,1.5023vw_+_0.6479rem,2rem)]
768px di larghezza → 21.9px
Aa 22px

Dimensione renderizzata a diversi viewport

375px di larghezzaAa 16px
908px di larghezzaAa 24px
1440px di larghezzaAa 32px

clamp(min, preferred, max) scala un valore in modo fluido con il viewport, bloccandosi ai valori minimo e massimo. Sostituisce le media query per tipografia, spaziatura e larghezze con una singola riga.

Usi comuni

  • Crea Tipografia Responsiva FluidaScala i tagli di carattere dolcemente tra mobile e desktop con una sola riga.
  • Margini e Spaziatura FluidiFai crescere la spaziatura della sezione con il viewport invece di saltare ai breakpoint.
  • Sostituisci Media Query con clamp()Riduci pile di override di breakpoint in un singolo valore fluido.
  • Costruisci una Scala di Tipo FluidaGenera step coerenti di clamp() per una scala di tipo del design system.
  • Titoli Hero e Display FluidiFai scalare drammaticamente ma in sicurezza i grandi titoli delle pagine di destinazione.

Come funziona

Questo strumento calcola i valori CSS clamp() usando una formula di interpolazione lineare scritta a mano — nessuna libreria, nessun round-trip al server. Inserisci due dimensioni e due larghezze di viewport; la matematica funziona istantaneamente nel tuo browser e produce un'espressione clamp() pronta da incollare con un valore preferito basato su vw che scala fluidamente il tuo testo o spaziatura tra quei breakpoint.

  1. 1
    Calcolo della pendenza lineare
    Lo strumento calcola una pendenza pixel-per-pixel: (dimensioneMax - dimensioneMin) / (viewportMax - viewportMin). Questa pendenza viene poi convertita in unità vw moltiplicando per 100, che è il cuore di come funziona la scala relativa al viewport in CSS.
  2. 2
    Derivazione dell'intercetta
    Un offset di intercetta (in px o rem) viene calcolato così la funzione lineare colpisce esattamente la tua dimensione minima al viewport minimo. Insieme, pendenza e intercetta formano il valore preferito dentro clamp() — la parte che effettivamente scala.
  3. 3
    Conversione unità e formattazione output
    Se scegli l'output rem, ogni valore in pixel viene diviso per la dimensione font radice configurata (predefinita 16px) prima di essere scritto nella stringa clamp(). Viene anche prodotta una classe Tailwind di valore arbitrario corrispondente, con gli spazi sostituiti da underscore secondo la sintassi di Tailwind.
  4. 4
    Anteprima dal vivo dello slider del viewport
    Uno slider range ti permette di scorrere da 320px a 1920px di larghezza. A ogni posizione la stessa formula di pendenza e intercetta calcola la dimensione clampata in tempo reale e rende testo di esempio a quella dimensione in pixel calcolata, così puoi vedere il comportamento di scala prima di copiare qualsiasi cosa.

Strumenti correlati

🟦

Generatore CSS Grid

Progetta visivamente una griglia CSS — tracce, unità e spazi — e copia il CSS e HTML generati.

Prova
📐

Qual è la mia risoluzione schermo

Vedi la risoluzione del tuo schermo in pixel CSS e reali, dimensione della finestra, rapporto pixel, profondità colore, HDR, supporto tocco e frequenza di aggiornamento, e copia tutto.

Prova
Di tendenza
✍️

Creatore di Firme

Disegna una firma con il mouse, il dito, o lo stilo, oppure scrivi il tuo nome in un font a mano libera, poi esportala come PNG o SVG trasparente.

Prova

Domande frequenti