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.

Stærðir
Lágmark
Hámark
clamp() gildi
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ð.

Forskoðun

Flæðandi texti, fullkomin stærð.

Breyttu stærðum og skjábreiddum til að móta gildið.

Ú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.

Skrifað og yfirfarið af ritstjórn BroBroGo.Síðast uppfært:

Skilningur á CSS clamp() og hlutverki þess í móttækilegri hönnun

CSS clamp() reiknivélin er tól sem reiknar út CSS clamp() gildi sem gerir stærð kleift að breytast mjúklega á milli lágmarks- og hámarksstærðar yfir mismunandi skjábreiddir. Þegar þú hannaðar móttækilega vefi þarftu oft að tryggja að hlutir eins og leturstærðir, spássíur, fyllingar eða bil aðlagi sig að tæki notandans.

Með því að gefa upp stærð fyrir lítinn skjá og stærð fyrir stóran skjá, býr þetta tól til clamp() fall. Þetta fall tryggir að stærðin fer aldrei niður fyrir lágmarksstærðina á litlum skjá og fer aldrei yfir hámarksstærðina á stórum skjá, heldur breytist flæðandi þar á milli. Þetta er sérstaklega gagnlegt fyrir þá sem hanna móttækilegt vefútlit, vilja búa til flæðandi leturgerð eða þurfa að beita sveigjanlegu bili (padding, margin, gap) sem aðlagar sig að mismunandi skjábreiddum.

Inntaksreitir og hvernig á að nota tólið

Til að reikna út rétta gildið þarf reiknivélin nokkur ákveðin inntök frá notandanum:

  • Lágmark (stærð og skjábreidd): Þú slærð inn tölustaf fyrir stærðina á litlum skjá (Lágmark) og tölustaf fyrir breidd litla skjásins Lágmark.
  • Hámark (stærð og skjábreidd): Þú slærð inn tölustaf fyrir stærðina á stórum skjá (Stærð) og tölustaf fyrir breidd stóra skjásins (Skjábreidd).
  • Grunnstærð leturs (root): Tölustafur sem notaður er til að breyta pixlum (px) yfir í rem.

Tólið gerir ráð fyrir að gildar tölur séu slegnar inn í alla reiti. Einnig gildir sú regla að breidd litla skjásins verður að vera minni jákvæð tala en breidd stóra skjásins. Ef þessu skilyrði er ekki mætt, sýnir reiknivélin úttaksgildið sem — og birtir villuboðin „Breidd litla skjásins verður að vera minni jákvæð tala en breidd stóra skjásins.“.

Úttak, forskoðun og stöðuboð

Þegar gildar upplýsingar hafa verið slegnar inn gefur reiknivélin eftirfarandi úttök:

  • clamp() gildi: Reiknaða CSS clamp() fallið, til dæmis clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem).
  • Forskoðun: Myndræn framsetning á því hvernig stærðin breytist. Hægt er að velja á milli þess að sjá þetta sem „Texti“ (þar sem sýndur er textinn „Flæðandi texti, fullkomin stærð.“) eða sem „Rammi“.
  • Breidd forskoðunar: Töluleg sýning á núverandi breidd forskoðunarsvæðisins.

Á meðan þú notar tólið geta mismunandi stöðuboð birst eftir því hvernig gildin eru stillt:

  • „Breyttu stærðum og skjábreiddum til að móta gildið.“ (þegar verið er að stilla gildin).
  • „Öfug breyting — stærðin minnkar þegar skjárinn stækkar.“ (ef stærðirnar eru stilltar þannig).
  • „Báðar stærðir eru jafnar, svo þetta er fast gildi en ekki flæðandi.“ (ef lágmarks- og hámarksstærðir eru þær sömu, þá fellur niðurstaðan í einfalda fasta lengd).
  • „haldið í lágmarki“.
  • „haldið í hámarki“.
  • „breytist flæðandi“.

Mikilvægi rem-eininga og aðgengi í vefhönnun

Tólið breytir pixlum yfir í rem með því að nota uppgefna grunnstærð leturs. Mörk clamp() gildisins eru sett fram í rem og breytilegi miðhlutinn heldur einnig rem-hluta.

Þetta er gert af mikilvægum ástæðum sem varða aðgengi (accessibility). Með því að halda rem-hluta í miðjunni er tryggt að texti stækkar enn þegar lesandi dregur að sér (zoom) eða hækkar sjálfgefna leturstærðina í vafranum sínum. Gildi sem myndu eingöngu nota viewport-einingar (eins og vw) myndu koma í veg fyrir að textinn stækkaði við þessar aðstæður, sem getur hindrað aðgengi fyrir sjónskerta notendur.

Öryggi og vinnsla gagna

Þegar þú notar þessa reiknivél þarftu ekki að hafa áhyggjur af gagnaöryggi. Útreikningurinn keyrir algjörlega í vafranum þínum og engu sem þú slærð inn hér er hlaðið upp á BroBroGo. Öll vinnsla fer fram staðbundið á þínu tæki.

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.

CSS Cubic Bezier rafallDragðu handföngin tvö til að móta hreyfisveigju, fylgstu með punktinum hreyfast og afritaðu cubic-bezier() gildið.Box Shadow rafallDragðu sleða til að móta box-shadow, raðaðu lögum til að skapa dýpt og afritaðu tilbúið CSS samstundis.Litagradíent rafallBúðu til línulegan, hringlaga eða keilulaga stigul, bættu við litastoppum, stilltu stefnuna og afritaðu CSS-kóðann með einum smelli.Border Radius rafallRúnnaðu hvert horn með sleðum, búðu til lífræn form með eldingarlaga stillingu og afritaðu CSS-kóðann samstundis.Flexbox rafallSettu upp flex-gám og einingar hans með myndrænum stýringum, sjáðu breytingarnar í rauntíma og afritaðu CSS-kóðann með einum smelli.CSS Grid rafallStilltu dálka og raðir, dragðu yfir reitina til að staðsetja einingar og afritaðu grid-CSS ásamt samsvarandi HTML með einum smelli.CSS snyrtir og þjappiEndurdregðu flókið CSS til að lesa það, eða þjappaðu því fyrir útgáfu — með öruggum ham sem breytir aldrei röð reglna.px í rem & em breytirBreyttu á milli px, rem og em með því að nota þína eigin grunnstærð og samhengi — breyttu hvaða reit sem er og hinir tveir uppfærast jafnharðan.