Kikokotoo cha CSS clamp()

Ingiza saizi ya skrini ndogo na kubwa na upate thamani ya clamp() inayobadilika vizuri katikati yake — kwa ajili ya saizi za fonti, padding, margin au gap.

Saizi
Kiwango cha Chini
Kiwango cha Juu
Thamani ya clamp()
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)

Matokeo yanabaki na sehemu ya rem katikati, kwa hivyo maandishi bado yanakuwa makubwa mtu anapozoom hadi 200% — thamani ya viewport pekee isingefanya hivyo.

Onyesho la Awali

Maandishi yanayobadilika, yenye saizi sahihi kabisa.

Rekebisha saizi na upana wa skrini ili kuunda thamani.

Kikokotoo kinafanya kazi kikamilifu kwenye kivinjari chako. Hakuna unachoingiza hapa kinachopakiwa kwenye BroBroGo.

Maswali Yanayoulizwa Sana

Je, kikokotoo kinaundaje thamani ya clamp()?

Unaipa pointi mbili: saizi kwenye upana wa skrini ndogo na saizi kwenye upana wa skrini kubwa. Inachora mstari ulionyooka kati yake ili saizi ikue vizuri skrini inapopanuka, kisha inaifunga kwenye clamp() ili isishuke kamwe chini ya saizi ya skrini ndogo au kuzidi saizi ya skrini kubwa. Kati ya upana huo miwili, saizi inabadilika kwa urahisi; nje yake inabaki kwenye kikomo cha karibu.

Kwa nini matokeo yako katika rem na vw badala ya pikseli?

Mipaka iko katika rem na sehemu ya katikati inayobadilika inabaki na sehemu ya rem, kwa hivyo maandishi bado yanakuwa makubwa msomaji anapozoom ndani au kuongeza saizi chaguomsingi ya fonti ya kivinjari chake — thamani ya pikseli au viewport pekee inaweza kuzuia hilo kufanya kazi. Unaandika saizi katika pikseli kwa sababu ndivyo watu wengi wanavyofikiria, na zana inabadilisha kuwa rem kwa kutumia saizi yako ya fonti ya msingi (root).

Je, ninaweza kutumia hii kwa nafasi (spacing), na si saizi ya fonti pekee?

Ndiyo. Thamani hiyo hiyo inafanya kazi kwa padding, margin, gap, width au height — popote urefu unapoingia. Badilisha onyesho la awali kuwa Box ili kuona nafasi ikikua badala ya maandishi. Ikiwa saizi zako ndogo na kubwa ni sawa, matokeo yanarudi kwenye urefu wa kawaida uliowekwa, kwani hakuna kitu cha kubadilisha.

Je, vivinjari vyote vinasaidia clamp()?

Ndiyo — kila kivinjari cha sasa kimesaidia clamp() tangu 2020, kwa hivyo unaweza kutumia thamani hiyo jinsi ilivyo bila mbadala. Kwenye kiwango cha juu kikubwa sana au mabadiliko ya haraka, inafaa kukagua haraka kwenye zoom ya 200% kwamba maandishi bado yanakuwa makubwa kwa wasomaji wanaohitaji.

Jenereta ya CSS Cubic BezierBuruta mishiko miwili ili kuunda mkondo wa easing, tazama nukta inavyosafiri kulingana na ile thabiti, na unakili thamani ya cubic-bezier().Jenereta ya Box ShadowBuruta vitelezi ili kuunda box-shadow, weka tabaka kwa kina zaidi, na unakili CSS iliyokamilika papo hapo.Jenereta ya GradientUnda gradient ya linear, radial, au conic, ongeza vituo vya rangi na uweke mwelekeo, kisha unakili CSS kwa mbofyo mmoja.Jenereta ya Border RadiusFanya kila pembe kuwa ya mduara kwa vitelezi, unda maumbo asilia ya blob kwa njia ya duaradufu, na unakili CSS papo hapo.Jenereta ya FlexboxWeka chombo cha flex na vipengele vyake kwa vidhibiti vya macho, tazama mpangilio unavyobadilika moja kwa moja, na unakili CSS kwa mbofyo mmoja.Jenereta ya CSS GridWeka safuwima na safu mlalo zako, buruta kwenye seli ili kuweka vipengele, na unakili CSS ya gridi pamoja na HTML inayolingana kwa mbofyo mmoja.Kisafishaji na Kipunguzaji cha CSSPanga upya CSS iliyovurugika ili kuisoma, au ipunguze ili kuisambaza — ikiwa na hali salama ambayo haipangi upya sheria zako kamwe.Kigeuzi cha px hadi rem & emBadilisha kati ya px, rem na em kwa kutumia saizi zako za msingi na muktadha — hariri sehemu yoyote na nyingine mbili zitasasishwa unapoandika.