Besplatan Generator CSS clamp()

Kako radi

Ovaj alat izračunava CSS clamp() vrijednosti koristeći ručno napisanu formulu linearne interpolacije — bez biblioteka, bez putovanja do servera. Unosite dvije veličine i dvije širine prozora prikaza; matematika se trenutno odvija u vašem pregledniku i proizvodi spreman-za-lijepljenje clamp() izraz sa preferiranom vrijednošću zasnovanom na vw koja glatko skalira vaš tip ili razmak između tih prijelomnih tačaka.

1. 1
   Izračunavanje linearnog nagiba

   Alat izračunava nagib piksel-po-piksel: (maksVeličina - minVeličina) / (maksProzor - minProzor). Ovaj nagib se zatim pretvara u vw jedinice množenjem sa 100, što je srž toga kako CSS relativno-prema-prozoru skaliranje radi.
2. 2
   Izvođenje presjeka

   Pomak presjeka (u px ili rem) se izračunava tako da linearna funkcija pogodi tačno vašu minimalnu veličinu na minimalnom prozoru. Zajedno, nagib i presjek čine preferiranu vrijednost unutar clamp() — dio koji zapravo skalira.
3. 3
   Konverzija jedinica i formatiranje izlaza

   Ako odaberete rem izlaz, svaka vrijednost u pikselima se dijeli vašom podešenom osnovnom veličinom fonta (zadano 16px) prije nego što se upiše u clamp() niz. Odgovarajuća Tailwind klasa proizvoljne vrijednosti se takođe proizvodi, sa razmacima zamijenjenim donjim crtama prema Tailwind sintaksi.
4. 4
   Pregled uživo sa klizačem prozora prikaza

   Klizač raspona vam omogućava da se krećete od 320px do 1920px širine. Na svakoj poziciji ista formula nagiba-i-presjeka izračunava ograničenu veličinu u realnom vremenu i prikazuje uzorak teksta tom izračunatom veličinom u pikselima, tako da možete vidjeti ponašanje skaliranja prije nego što bilo šta kopirate.

Povezani alati