Neidio i'r prif gynnwys
LibraTool logoLibraTool

Generadur CSS clamp() am ddim

Cynhyrchwch werth CSS clamp() rhygl ar gyfer teipograffeg a bylchau cyfaneddol. Gosodwch faint min/max ac ystod porthiant, gweld rhagolwg byw, a chopïo'r CSS un-llinell.

Yn gweithio all-lein ar ôl llwytho
Uned allbwn:
Gwerth CSS
font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);
Dosbarth Tailwind
text-[clamp(1rem,1.5023vw_+_0.6479rem,2rem)]
768px o led → 21.9px
Aa 22px

Maint wedi'i rendro ar bortholion golwg gwahanol

375px o ledAa 16px
908px o ledAa 24px
1440px o ledAa 32px

Mae clamp(min, dewisol, max) yn graddio gwerth yn rhugl gyda'r porthol golwg, yna'n cloi ar y min a max. Mae'n disodli pentyrau o ymholiadau cyfryngau ar gyfer teipograffi, gofod, a lled gydag un llinell.

Defnyddiau cyffredin

  • Creu Teipogriffeg Gyfyngach HylifGradfa meintiau ffont yn esmwyth rhwng symudol a bwrdd gyda llinell un.
  • Ymylon Hylif a PhadioGwneud bylchau adran yn tyfu gyda'r lleoliad yn hytrach na neidio ar thorfeydd.
  • Disodli Ymholiadau Cyfrwng â clamp()Cwymp pentwr o rorbannau torfeydd i werth hylif sengl.
  • Adeiladu Graddfa Teip HylifCynhyrchu camau clamp() cyson ar gyfer graddfa math system cynllunio.
  • Teitlau Arwr a Dangos HylifGwneud penawdau glanio-tudalen mawr raddfa'n ddramatig ond yn ddiogel.

Sut Mae'n Gweithio

Mae'r offeryn hwn yn cyfrifo gwerthoedd CSS clamp() gan ddefnyddio fformiwla ryngosodiad llinellol wedi'i hysgrifennu â llaw — dim llyfrgelloedd, dim teithiau cron gweinydd. Rydych yn rhoi dau faint a dwy led porthwydd; mae'r fathemateg yn rhedeg ar unwaith yn eich porwr ac yn cynhyrchu mynegiad clamp() yn barod i'w ludo gyda gwerth ffafredig seiliedig-vw sy'n graddio eich teip neu fylchau'n llyfn rhwng y pwyntiau toriad hynny.

  1. 1
    Cyfrifiad graddiant llinellol
    Mae'r offeryn yn cyfrifo graddiant picsel-fesul-picsel: (maintMax - maintMin) / (porthwyddMax - porthwyddMin). Yna trosir y graddiant hwn i unedau vw drwy luosi â 100, sy'n graidd i sut mae graddio cymharol-porthwydd CSS yn gweithio.
  2. 2
    Deilliad rhyng-doriad
    Cyfrifir ansymudiad rhyng-doriad (mewn px neu rem) fel bod y ffwythiant llinellol yn taro eich maint lleiaf yn union ar y porthwydd lleiaf. Gyda'i gilydd, mae graddiant a rhyng-doriad yn ffurfio'r gwerth ffafredig y tu mewn i clamp() — y rhan sy'n graddio mewn gwirionedd.
  3. 3
    Trosi unedau a fformatio allbwn
    Os dewiswch allbwn rem, mae pob gwerth picsel yn cael ei rannu â'ch maint ffont gwraidd wedi'i gyflunio (16px rhagosodedig) cyn ei ysgrifennu i'r llinyn clamp(). Cynhyrchir dosbarth gwerth-mympwyol Tailwind cyfatebol hefyd, gyda bylchau'n cael eu disodli â thanlinellau yn ôl cystrawen Tailwind.
  4. 4
    Rhagolwg llithrydd porthwydd byw
    Mae llithrydd amrediad yn eich galluogi i grafu o 320px i 1920px o led. Ym mhob safle mae'r un fformiwla graddiant-a-rhyng-doriad yn gwerthuso'r maint wedi'i glampio mewn amser real ac yn rendro testun sampl yn y maint picsel a gyfrifwyd hwnnw, fel y gallwch weld yr ymddygiad graddio cyn copïo unrhyw beth.

Offer Cysylltiedig

🟦

Generadur CSS Grid

Dylunio CSS grid yn ddeiliadol — traciau, unedau a bylchau — ac copïo'r CSS a HTML a gynhyrchwyd.

Rhowch gynnig arni
📐

Beth Yw Datrysiad Fy Sgrin

Gwelwch gydraniad eich sgrin mewn picseli CSS a phicseli go iawn, maint y ffenestr, cymhareb picseli, dyfnder lliw, HDR, cefnogaeth gyffwrdd a chyfradd adnewyddu, a chopïwch y cyfan.

Rhowch gynnig arni
Yn tueddu
✍️

Gwneuthurwr Llofnod

Tynnwch lofnod gyda'ch llygoden, bys, neu stylus, neu deipiwch eich enw mewn ffont llawysgrifen, yna ei allforio fel PNG neu SVG tryloyw.

Rhowch gynnig arni

Cwestiynau Cyffredin