Kalkolatur ta' CSS clamp()

Daħħal daqs għal skrins żgħar u kbar u rċievi valur fluwidu clamp() li jiskala b'mod uniformi bejniethom — għal daqsijiet ta' tipa, padding, margins jew gaps.

Daqsijiet
Minimu
Massimu
Valur clamp()
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)

Ir-riżultat iżomm parti f'rem fit-terminu tan-nofs, sabiex it-test xorta jikber meta xi ħadd jagħmel zoom għal 200% — valur ibbażat fuq il-viewport biss ma jagħmilx dan.

Preview

Test fluwidu, bid-daqs perfett.

Aġġusta d-daqsijiet u l-wisgħat tal-iskrin biex tifforma l-valur.

Il-kalkolu jsir kollu kemm hu fil-browser tiegħek. Xejn minn dak li ddaħħal hawn ma jiġi mtella' fuq BroBroGo.

Mistoqsijiet Frekwenti

Kif jikkalkula l-kalkolatur il-valur clamp()?

Inti tipprovdi żewġ punti: daqs għal wisa' ta' skrin żgħir u daqs għal wisa' ta' skrin kbir. Huwa jikkalkula linja dritta bejniethom sabiex id-daqs jikber b'mod fluwidu hekk kif l-iskrin jinfetaħ, u mbagħad ikebbsu f'clamp() sabiex qatt ma jinżel taħt id-daqs tal-iskrin żgħir tiegħek jew jaqbeż id-daqs tal-iskrin kbir tiegħek. Bejn iż-żewġ wisgħat id-daqs ivarja b'mod fluwidu; barra minnhom jibqa' ffissat fl-eqreb limitu.

Għaliex ir-riżultat huwa f'rem u vw minflok f'pixels?

Il-limiti huma f'rem u l-parti tan-nofk li tinbidel iżżomm komponent rem, sabiex it-test xorta jikber meta l-utent iżid iż-zoom jew id-daqs default tat-tipa fil-browser tiegħu — valur f'pixels jew viewport biss jista' jwaqqaf dan milli jaħdem. Inti ddaħħal id-daqsijiet f'pixels għax hekk jaħseb l-aktar kulħadd, u l-għodda tikkonvertihom f'rem billi tuża d-daqs tat-tipa tal-għerq (root).

Nista' nuża dan għall-ispazjar, u mhux biss għad-daqs tat-tipa?

Iva. L-istess valur jaħdem għal padding, margin, gap, wisa' jew għoli — kull fejn jintuża tul. Aqleb il-preview għal Box biex tara l-ispazjar jikber minflok it-test. Jekk id-daqsijiet żgħar u kbar tiegħek huma l-istess, ir-riżultat jinbidel f'tul fiss sempliċi, peress li m'hemm xejn x'jiġi skalat.

Il-browsers kollha jappoġġjaw clamp()?

Iva — kull browser modern jappoġġja clamp() mill-2020, sabiex tkun tista' tuża l-valur kif inhu mingħajr fallback. Fuq massimu kbir ħafna jew rata mgħaġġla ta' bidla, huwa rakkomandat li tagħmel verifika mgħaġġla b'zoom ta' 200% biex tiżgura li t-test xorta jikber għal min għandu bżonnu.

Ġeneratur ta' CSS Cubic BezierDrag iż-żewġ manki biex tifforma kurva ta' easing, ara tikka timxi magħha mqabbla ma' waħda b'veloċità kostanti, u kkopja l-valur cubic-bezier().Ġeneratur ta' Box ShadowDrag is-sliders biex tifforma box-shadow, żid is-saffi għal aktar fond, u kkopja s-CSS lest istantanjament.Ġeneratur ta' GradjentiIbni gradjent lineari, radjali, jew koniku, żid waqfiet tal-kulur u ssettja d-direzzjoni, imbagħad ikkopja s-CSS bi klikk waħda.Ġeneratur ta' Border RadiusIttundja kull kantuniera bi sliders, oħloq forom organiċi bil-mod ellittiku, u kkopja s-CSS istantanjament.Ġeneratur ta' FlexboxIkkonfigura kontenitur flex u l-oġġetti tiegħu b'kontrolli viżwali, ara t-tqassim jirreaġixxi f'ħin reali, u kkopja s-CSS bi klikk waħda.Ġeneratur ta' CSS GridIssettja l-kolonni u r-ringieli tiegħek, drag fuq iċ-ċelloli biex tpoġġi l-oġġetti, u kkopja s-CSS tal-grid flimkien mal-HTML korrispondenti bi klikk waħda.CSS Beautifier & MinifierErġa' indenta CSS imħawwad biex taqrah, jew ikkompressah biex tibagħtu — b'mod sikur li qatt ma jerġa' jordna r-regoli tiegħek.Konvertitur minn px għal rem u emIkkonverti bejn px, rem u em billi tuża d-daqsijiet tat-tipa tal-għerq u tal-kuntest tiegħek stess — editja kwalunkwe qasam u ż-żewġ oqsma l-oħra jaġġornaw waqt li tikteb.