Preskoči na glavni sadržaj
LibraTool logoLibraTool

Generator CSS clamp() — besplatno

Generirajte fluidnu CSS clamp() vrijednost za responzivnu tipografiju i razmake. Postavite minimalnu/maksimalnu veličinu i raspon preglednika, pogledajte živi pregled i kopirajte jednolincijski CSS.

Radi offline nakon učitavanja
Izlazna jedinica:
CSS vrijednost
font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);
Tailwind klasa
text-[clamp(1rem,1.5023vw_+_0.6479rem,2rem)]
768px širine → 21.9px
Aa 22px

Prikazana veličina na različitim viewportima

375px širineAa 16px
908px širineAa 24px
1440px širineAa 32px

clamp(min, preferred, max) skalira vrijednost tekuće s viewportom, zatim se zaključava na min i max. Zamjenjuje gomile media query-a za tipografiju, razmak i širine jednom linijom.

Uobičajene namjene

  • Kreirajte fluidnu tipografiju za odzivniSkalirajte veličine fonta glatko između mobilnog i stolnog s jednom linijom.
  • Fluidne margine i padineNeka razmak sekcije raste s prikazom umjesto da skoči kod prekida.
  • Zamijeni medijske upite s clamp()Sažmi hrpe prekida nadmetanja u jednu fluidnu vrijednost.
  • Kreirajte fluidnu skalu tipaGenerirajte dosljedne korake clamp() za skalu tipa sustava dizajna.
  • Fluidni heroj i prikazani nasloviUčinite da se veliki naslovi za sletanje kampanje dramatično skaliraju ali sigurno.

Kako funkcionira

Ovaj alat izračunava vrijednosti CSS clamp() koristeći ručno napisanu formulu linearne interpolacije — bez biblioteka, bez okretanja poslužitelju. Unosite dvije veličine i dvije širine viewporta; matematika radi trenutačno u vašem pregledniku i proizvodi izraz clamp() spreman za lijepljenje s preferiranom vrijednosti temeljenom na vw koja glatko skalira vaš tekst ili razmak između tih prijelomnih točaka.

  1. 1
    Izračun linearnog nagiba
    Alat izračunava nagib piksel-po-piksel: (maksVeličina - minVeličina) / (maksViewport - minViewport). Ovaj nagib se zatim pretvara u vw jedinice množenjem sa 100, što je srž toga kako radi CSS skaliranje relativno viewportu.
  2. 2
    Izvođenje presjeka
    Pomak presjeka (u px ili rem) izračunava se tako da linearna funkcija pogodi točno vašu minimalnu veličinu pri minimalnom viewportu. Zajedno, nagib i presjek tvore preferiranu vrijednost unutar clamp() — dio koji se zapravo skalira.
  3. 3
    Pretvorba jedinica i formatiranje izlaza
    Ako odaberete rem izlaz, svaka vrijednost u pikselima dijeli se s konfiguriranom korijenskom veličinom fonta (zadano 16px) prije zapisivanja u clamp() niz. Odgovarajuća Tailwind klasa proizvoljne vrijednosti se također proizvodi, s razmacima zamijenjenim podvlakama prema Tailwind sintaksi.
  4. 4
    Pregled klizača viewporta uživo
    Klizač raspona omogućuje vam pomicanje od 320px do 1920px širine. Na svakoj poziciji ista formula nagiba i presjeka izračunava zadanu veličinu u stvarnom vremenu i renderira uzorak teksta u toj izračunatoj veličini piksela, tako da vidite ponašanje skaliranja prije nego što bilo što kopirate.

Srodni alati

🟦

CSS Grid generator

Vizualno kreirajte CSS grid — tragove, jedinice i razmake — i kopirajte generirani CSS i HTML.

Isprobajte
📐

Koja je moja rezolucija zaslona

Pogledajte razlučivost zaslona u CSS i stvarnim pikselima, veličinu prozora, omjer piksela, dubinu boje, HDR, podršku za dodir i brzinu osvježavanja te sve kopirajte.

Isprobajte
Popularno
✍️

Izrada potpisa

Nacrtajte potpis mišem, prstom ili olovkom, ili utipkajte svoje ime u fontu rukopisa, zatim ga izvezite kao prozirni PNG ili SVG.

Isprobajte

Često postavljana pitanja