Pređi na glavni sadržaj
LibraTool logoLibraTool

Generator CSS clamp() vrednosti — besplatno

Generišite fluidnu CSS clamp() vrednost za responzivnu tipografiju i razmake. Postavite min/maks veličinu i opseg viewport-a, vidite pregled uživo i kopirajte jednoliniski CSS.

Radi van mreže kada se učita
Izlazna jedinica:
CSS vrednost
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 vrednost tečno sa viewportom, zatim se zaključava na min i max. Zamenjuje gomile media query-a za tipografiju, razmak i širine jednom linijom.

Uobičajene upotrebe

  • Napravite tečnu tipografiju odgovoraSkalirajte veličine fonta glatko između mobilnog i desktopa sa jednom linijom.
  • Tečni maržin i obivanjeNapravite razmak sekcije rasti sa prikazom mesto da skoči na raskidima.
  • Zameni upite medij sa clamp()Kolaps stope nadmetanja raskida u jednu tečnu vrednost.
  • Napravite tečnu skalu tipaGenerišite konzistentne korbake clamp() za skalu tipa sistema dizajna.
  • Tečni heroj i prikazane nasloveNapravite velike naslovu strana sa sletanjem da se skaliraju dramatično ali bezbedno.

Kako funkcioniše

Ova alatka izračunava CSS clamp() vrednosti koristeći ručno napisanu formulu linearne interpolacije — bez biblioteka, bez putovanja do servera i nazad. Unosite dve veličine i dve širine prikaza; matematika se izvršava trenutno u vašem pregledaču i proizvodi spreman-za-lepljenje clamp() izraz sa preferiranom vrednošću zasnovanom na vw koja glatko skalira vaš tekst ili razmak između tih prelomnih tačaka.

  1. 1
    Izračunavanje linearnog nagiba
    Alatka izračunava nagib piksel-po-piksel: (maksVeličina - minVeličina) / (maksPrikaz - minPrikaz). Ovaj nagib se zatim konvertuje u vw jedinice množenjem sa 100, što je srž toga kako radi CSS skaliranje relativno prema prikazu.
  2. 2
    Izvođenje presečne tačke
    Pomak presečne tačke (u px ili rem) se izračunava tako da linearna funkcija tačno pogodi vašu minimalnu veličinu na minimalnoj širini prikaza. Zajedno, nagib i presečna tačka čine preferiranu vrednost unutar clamp() — deo koji zapravo skalira.
  3. 3
    Konverzija jedinica i formatiranje izlaza
    Ako izaberete rem izlaz, svaka vrednost u pikselima se deli vašom podešenom veličinom korenog fonta (podrazumevano 16px) pre nego što se upiše u clamp() niz. Odgovarajuća Tailwind klasa proizvoljne vrednosti se takođe proizvodi, sa razmacima zamenjenim donjim crtama prema Tailwind sintaksi.
  4. 4
    Prikaz uživo sa klizačem prikaza
    Klizač opsega vam omogućava da prevlačite od 320px do 1920px širine. Na svakoj poziciji ista formula nagiba i presečne tačke izračunava zaključanu veličinu u realnom vremenu i prikazuje uzorak teksta na toj izračunatoj veličini u pikselima, tako da možete videti ponašanje skaliranja pre nego što bilo šta kopirate.

Slične alatke

🟦

CSS Grid generator

Vizuelno dizajnirajte CSS mrežu — trake, jedinice i razmake — i kopirajte generisani CSS i HTML.

Isprobajte
📐

Koja je rezolucija mog ekrana

Pogledajte rezoluciju ekrana u CSS i stvarnim pikselima, veličinu prozora, odnos piksela, dubinu boje, HDR, podršku za dodir i brzinu osvežavanja i sve to kopirajte.

Isprobajte
Popularno
✍️

Kreator potpisa

Nacrtajte potpis mišem, prstom ili stilusom, ili otkucajte svoje ime fontom rukopisa, a zatim ga izvezite kao providan PNG ili SVG.

Isprobajte

Česta pitanja