Vés al contingut principal
LibraTool logoLibraTool

Generador de clamp() CSS de franc

Genera un valor clamp() CSS fluid per a tipografia i espaiat responsius. Estableix les mides mínima/màxima i el rang de viewport, veu una previsualització en viu i copia el CSS d'una sola línia.

Funciona sense connexió un cop carregat
Unitat de sortida:
Valor CSS
font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);
Classe Tailwind
text-[clamp(1rem,1.5023vw_+_0.6479rem,2rem)]
768px d'amplada → 21.9px
Aa 22px

Mida renderitzada a diferents amplades de finestra

375px d'ampladaAa 16px
908px d'ampladaAa 24px
1440px d'ampladaAa 32px

clamp(min, preferred, max) escala un valor de manera fluida amb l'amplada de la finestra i el bloqueja al mínim i màxim. Substitueix piles de media queries per a tipografia, espaiat i amplades amb una sola línia.

Usos habituals

  • Crea tipografia fluida responsivaEscala suavement les mides de tipus entre mòbil i escriptori amb una línia.
  • Marges i farciment fluidcsFeu que l'espaiat de secció creixi amb la vista en lloc de saltar als trencaments.
  • Reemplaça les consultes de mitjans amb clamp()Col·lapse piles de sobrescriptures de trencament en un valor fluid.
  • Crea una escala de tipus fluidGenera passos consistents de clamp() per a una escala de tipus de sistema de disseny.
  • Heroi fluid i capçaleres de pantallaFeu que els grans títols de pàgina d'aterratge s'escaiin dràsticament però de forma segura.

Com funciona

Aquesta eina calcula valors CSS clamp() utilitzant una fórmula d'interpolació lineal escrita a mà — sense biblioteques, sense anades i tornades al servidor. Introdueixes dues mides i dues amplades de vista; les matemàtiques s'executen a l'instant al teu navegador i produeixen una expressió clamp() a punt per enganxar amb un valor preferit basat en vw que escala suaument el teu text o espaiat entre aquests punts de ruptura.

  1. 1
    Càlcul del pendent lineal
    L'eina calcula un pendent píxel per píxel: (midaMax - midaMin) / (vistaMax - vistaMin). Aquest pendent es converteix llavors a unitats vw multiplicant per 100, que és el nucli de com funciona l'escalat relatiu a la vista de CSS.
  2. 2
    Derivació de la intercepció
    Es calcula un desplaçament d'intercepció (en px o rem) perquè la funció lineal encerti exactament la teva mida mínima a l'amplada de vista mínima. Junts, el pendent i la intercepció formen el valor preferit dins de clamp() — la part que realment escala.
  3. 3
    Conversió d'unitats i format de sortida
    Si tries la sortida en rem, cada valor en píxels es divideix per la mida de font arrel configurada (16px per defecte) abans d'escriure's a la cadena clamp(). També es produeix una classe de valor arbitrari de Tailwind corresponent, amb els espais reemplaçats per guions baixos segons la sintaxi de Tailwind.
  4. 4
    Previsualització en directe amb control lliscant de vista
    Un control lliscant de rang et permet desplaçar-te de 320px a 1920px d'amplada. A cada posició, la mateixa fórmula de pendent i intercepció avalua la mida limitada en temps real i renderitza un text de mostra a aquesta mida de píxel calculada, així pots veure el comportament d'escalat abans de copiar res.

Eines relacionades

🟦

Generador de CSS Grid

Dissenya visualment una CSS grid — pistes, unitats i buits — i copia el CSS i HTML generat.

Prova-ho
📐

Quina és la resolució de la meva pantalla

Veu la resolució de la teva pantalla en píxels CSS i reals, la mida de la finestra, la ràtio de píxels, la profunditat de color, HDR, compatibilitat tàctil i freqüència de refresc, i copia-ho tot.

Prova-ho
Tendència
✍️

Creador de signatures

Dibuixa una signatura amb el ratolí, el dit o un llapis òptic, o escriu el teu nom amb un tipus de lletra manuscrit, i després exporta-la com a PNG o SVG transparent.

Prova-ho

Preguntes freqüents