Kalkulator CSS Clamp().
Izračunajte resnično tekočo vrednost CSS clamp() iz najmanjše in največje velikosti v dveh širinah vidnega okna, pri čemer sta naklon in presečišče prikazana korak za korakom in predogled spreminjanja velikosti v živo.
Rezultat
CSS clamp(MIN, PREFERRED, MAX) omogoča, da ena deklaracija nadomesti cel kup medijskih poizvedb: vrednost ostane pri MIN pod najmanjšim vidnim poljem, pri MAX nad največjim in se vmes gladko spreminja. Težji del je PREFERENČNI izraz – izraz, relativen glede na vidno polje, kot je 0,833rem + 0,833vw – ki ga nihče noče izpeljati ročno. Ta kalkulator ga dejansko izračuna iz štirih števil: najmanjše velikosti, največje velikosti in širine vidnega polja, pri kateri velja vsaka.
Prikazano je vsako vmesno število, ne le končna vrstica: naklon (za koliko velikostnih enot se poveča vrednost na slikovno piko vidnega polja), ta isti naklon, izražen kot koeficient vw, in presečišče osi y — konstanta, dodana izrazu vw, tako da premica poteka skozi natanko ti dve točki, ki ste ju določili. Vsakdo, ki je prilepil vrednost clamp() iz vadnice, ne da bi jo razumel, lahko tukaj vidi in preveri dejansko aritmetiko.
Drsnik za širino vidnega polja poganja polje za predogled v živo, tako da je tekoče skaliranje vidno, ne samo izračunano: povlecite ga med najnižjo in najvišjo prelomno točko in opazujte, kako se velikost vzorčnega besedila spreminja natanko tako, kot bi se spreminjala velikost pravega okna brskalnika. Izhodna vrstica in razčlenitev se posodobita ob vsakem pritisku na tipko – to se naravno združi s pretvornikom px v rem, ko je treba pretvoriti tudi osnovno velikost pisave.
V enem koraku preklopite na način lestvice tipov za popoln sistem tekoče tipografije: vnesite osnovno velikost in modularno razmerje (1,125 do 1,5) in pridobite šest velikosti – majhna, osnovna, h4, h3, h2 in h1 – vsaka izračunana kot lastna linija clamp() med nežnejšim napredovanjem v mobilnih napravah in razmerjem celotnega namizja, pripravljenih za kopiranje kot blok lastnosti CSS po meri.