CSS clamp() reiknivél
Sláðu inn stærð fyrir litla og stóra skjái og fáðu flæðandi clamp() gildi sem breytist mjúklega á milli — fyrir leturstærðir, spássíur eða bil.
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)Niðurstaðan heldur rem-hluta í miðjunni, þannig að texti stækkar enn þegar notandi dregur að sér (zoom) í 200% — gildi sem notar eingöngu viewport myndi ekki gera það.
Flæðandi texti, fullkomin stærð.
Útreikningurinn keyrir algjörlega í vafranum þínum. Engu sem þú slærð inn hér er hlaðið upp á BroBroGo.
Algengar spurningar
Hvernig býr reiknivélin til clamp() gildið?
Þú gefur upp tvo punkta: stærð á litlum skjá og stærð á stórum skjá. Reiknivélin dregur beina línu þar á milli þannig að stærðin vex jafnt og þétt eftir því sem skjárinn breikkar, og setur hana svo inn í clamp() þannig að hún fer aldrei niður fyrir lágmarkið eða upp fyrir hámarkið. Á milli þessara tveggja skjábreidda breytist stærðin flæðandi; utan þeirra helst hún við mörkin.
Af hverju er niðurstaðan í rem og vw í stað pixla?
Mörkin eru í rem og breytilegi miðhlutinn inniheldur rem-gildi, þannig að texti stækkar enn þegar lesandi stækkar síðuna eða breytir sjálfgefinni leturstærð vafrans — gildi sem nota eingöngu pixla eða viewport geta komið í veg fyrir það. Þú slærð inn stærðir í pixlum því flestir hugsa í þeim, og tólið breytir þeim í rem miðað við grunnpixlastærðina þína.
Get ég notað þetta fyrir bil (spacing) en ekki bara leturstærð?
Já. Sama gildi virkar fyrir padding, margin, gap, breidd eða hæð — hvar sem lengd er notuð. Skiptu forskoðuninni yfir í „Ramma“ (Box) til að sjá bilin stækka í stað textans. Ef lágmarks- og hámarksstærðir þínar eru þær sömu, fellur niðurstaðan einfaldlega í venjulega fasta lengd, þar sem ekkert þarf að breytast.
Styðja allir vafrar clamp()?
Já — allir nútíma vafrar hafa stutt clamp() síðan 2020, svo þú getur notað gildið eins og það er án varaleiða. Ef hámarkið er mjög stórt eða breytingin hröð er þó gott að athuga í 200% zoom-stillingu að textinn stækki rétt fyrir þá sem þurfa á því að halda.