Kalkulator CSS Clamp()
Izračunajte pravo tekočo vrednost CSS clamp() iz najmanjše in največje velikosti pri dveh širinah okna, s prikazom naklona in presečišča korak za korakom ter predogledom spreminjanja velikosti v živo.
🔒 V celoti obdelano v vašem brskalniku – nič, kar tukaj vnesete, ni nikoli naloženo.
Rezultat
CSS clamp(MIN, PREFERRED, MAX) omogoča, da ena deklaracija nadomesti cel kup medijskih poizvedb: vrednost ostane na MIN pod najmanjšo širino okna, na MAX nad največjo, vmes pa se gladko prilagaja. Težaven del je izraz PREFERRED – izraz, vezan na širino okna, kot je 0,833rem + 0,833vw – ki ga nihče noče izpeljati ročno. Ta kalkulator ga izračuna za vas iz štirih številk: najmanjše velikosti, največje velikosti in širine okna, pri kateri vsaka od njiju velja.
Prikazane so vse vmesne številke, ne le končna vrstica: naklon (koliko enot velikosti vrednost naraste na slikovno piko širine okna), isti naklon, izražen kot koeficient vw, in presečišče z osjo y – konstanta, dodana členu vw, tako da premica poteka natanko skozi dve točki, ki ste ju določili. Vsak, ki je prilepil vrednost clamp() iz vodiča, ne da bi jo razumel, lahko tukaj vidi in preveri dejansko aritmetiko.
Drsnik širine okna krmili polje za predogled v živo, tako da je tekoče prilagajanje vidno, ne le izračunano: povlecite ga med najmanjšo in največjo prelomno točko in opazujte, kako se vzorčno besedilo spreminja točno tako, kot bi se ob spreminjanju velikosti pravega okna brskalnika. Izhodna vrstica in razčlenitev se posodobita ob vsakem pritisku tipke – to se naravno dopolnjuje s pretvornikom px v rem, ko je treba pretvoriti tudi samo osnovno velikost pisave.
Preklopite v način tipografske lestvice za celovit sistem tekoče tipografije v enem koraku: vnesite osnovno velikost in modularno razmerje (1,125 do 1,5) in dobite šest velikosti – majhno, osnovno, h4, h3, h2 in h1 – vsako izračunano kot svojo vrstico clamp(), med nežnejšim mobilnim napredovanjem in polnim namiznim razmerjem, pripravljene za kopiranje kot blok lastnosti CSS po meri.