Fara beint í aðalefni
LibraTool logoLibraTool

CSS clamp()-smiður — ókeypis

Búðu til fljótandi CSS clamp() gildi fyrir svarhæfar leturnám og bil. Stilltu lágmarks/hámmarksstærð og skjásvið, sjáðu beina forskoðun og afritaðu einalína CSS.

Virkar án nettengingar eftir hleðslu
Úttak eining:
CSS-gildi
font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);
Tailwind flokkur
text-[clamp(1rem,1.5023vw_+_0.6479rem,2rem)]
768px breitt → 21.9px
Aa 22px

Myndræn stærð á mismunandi skjágluggum

375px breittAa 16px
908px breittAa 24px
1440px breittAa 32px

clamp(min, preferred, max) skallar gildi þykkjulega með skjáglugganum og læsist við min og max. Það kemur í stað margra miðpunkta fyrir leturgerð, bil og breiddir með einni línu.

Algeng notkun

  • Búðu til fljótandi svarandi lýsinguMælikvarðu leturfleis óhlutbundið á milli fartölvu og skjástofu með einni línu.
  • Fljótandi jaðar og pöðunGerðu hluta bili vaxa með skoðunarglugga í stað þess að stökkva á brot.
  • Skiptu fjölmiðlum spurningum með clamp()Hrun stafla af brot yfirlýsingu á einn fljótandi gildi.
  • Byggðu fljótandi gerðar skalaMynda samræmda clamp() skref fyrir hönnun kerfi gerðar skala.
  • Fljótandi hetjur og birtum fyrirlýsingarGerðu stórum landing síðu fyrirlýsingum mælikvarða stærðfræðilega en öruggt.

Hvernig það virkar

Þetta tól reiknar CSS clamp() gildi með handskrifaðri línulegri innskotsformúlu — engin bókasöfn, engar netþjónsferðir. Þú slærð inn tvær stærðir og tvær sjónsviðsbreiddir; stærðfræðin keyrir samstundis í vafranum þínum og framleiðir tilbúna-til-límingar clamp() tjáningu með vw-byggðu vildgildi sem skalar leturgerð þína eða bil mjúklega milli þeirra brotapunkta.

  1. 1
    Línulegur halla-útreikningur
    Tólið reiknar pixil-per-pixil halla: (hámStærð - lágmStærð) / (hámSjónsvið - lágmSjónsvið). Þessi halli er svo breyttur í vw-einingar með því að margfalda með 100, sem er kjarninn í því hvernig CSS sjónsviðs-hlutfallsleg skölun virkar.
  2. 2
    Skurðpunktsleiðsla
    Skurðpunktsfrávik (í px eða rem) er reiknað svo línulega fallið hitti nákvæmlega lágmarksstærðina þína við lágmarks sjónsviðið. Saman mynda halli og skurðpunktur vildgildið inni í clamp() — hlutann sem raunverulega skalar.
  3. 3
    Eininga umbreyting og úttaksmótun
    Ef þú velur rem-úttak er sérhvert pixilgildi deilt með stilltri rót-leturstærð þinni (sjálfgefið 16px) áður en það er skrifað í clamp()-strenginn. Samsvarandi Tailwind handahófs-gildisflokkur er einnig framleiddur, með bilum skipt út fyrir undirstrik samkvæmt setningafræði Tailwind.
  4. 4
    Lifandi sjónsviðsrennu-forskoðun
    Sviðsrenna leyfir þér að skruna frá 320px til 1920px breidd. Á hverri stöðu metur sama halla-og-skurðpunkts-formúla klemmda stærð í rauntíma og myndgerir sýnistexta á þeirri reiknuðu pixilstærð, svo þú sérð skölunarhegðunina áður en þú afritar neitt.

Tengd verkfæri

🟦

CSS Grid framleiðandi

Hannstu CSS hnitakerfi með sjónrænum hætti — brautir, einingar og bila — og afritaðu mynduðu CSS og HTML.

Prófaðu það
📐

Hver er skjáupplausnin mín

Sjáðu skjáupplausn þína í CSS- og raunpunktum, gluggastærð, punktahlutfall, litadýpt, HDR, snertistuðning og endurnýjunartíðni, og afritaðu allt saman.

Prófaðu það
Vinsælt
✍️

Undirskriftargerðarvél

Teiknaðu undirskrift með músinni, fingrinum eða pennanum, eða skrifaðu nafnið þitt með rithandarletri, flyttu hana svo út sem gagnsæja PNG eða SVG.

Prófaðu það

Algengar spurningar