Xisaabiyaha CSS clamp()

Geli cabbir loogu talagalay shaashadaha yaryar iyo kuwa waaweyn si aad u hesho qiimo dabiici ah oo clamp() ah oo si habsmooth ah ugu dhex miisaamaya — ee cabbirrada farta, padding, margins ama gaps.

Cabbirrada
Ugu yar
Ugu badnaan
Qiimaha clamp()
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)

Natiijadu waxay ku haysataa qayb rem ah dhexda, markaa qoraalku weli wuu weynaanayaa marka qof uu weyneeyo (zoom) ilaa 200% — qiimaha viewport-only ah ma samayn lahayn taas.

Hor-u-arag

Qoraal dabiici ah, oo cabbirkiisu sax yahay.

Hagaaji cabbirrada iyo ballacyada shaashadda si aad u qaabayso qiimaha.

Xisaabinta waxay gabi ahaanba ku dhex socotaa biraawsarkaaga. Waxba oo aad halkan ku geliso looma soo gudbiyo BroBroGo.

Su'aalaha badanaa la isweydiiyo

Sidee xisaabiyuhu u dhisaa qiimaha clamp()?

Waxaad siisaa laba dhibcood: cabbirka shaashadda yar iyo cabbirka shaashadda weyn. Wuxuu dhex dhigayaa xariiq toosan si cabbirku si habsmooth ah ugu kordho marka shaashaddu ballaarato, ka dibna wuxuu ku duubayaa clamp() si uusan marnaba uga hoos marin cabbirkaaga shaashadda yar ama uusan uga sarre marin cabbirkaaga shaashadda weyn. Inta u dhaxaysa labada ballac cabbirku wuxuu u weynaanayaa si dabiici ah; bannaankoodana wuxuu ku nagaanayaa xadka ugu dhow.

Maxay tahay sababta natiijadu u tahay rem iyo vw halkii ay ahaan lahayd pixels?

Xuduuduhu waxay ku jiraan rem halka qaybta dhexe ee isbeddelaysa ay haysato qayb rem ah, markaa qoraalku weli wuu weynaanayaa marka akhristuhu uu weyneeyo ama uu kordhiyo cabbirka farta caadiga ah ee biraawsarkiisa — qiimaha pixel ama viewport oo keliya ah wuxuu joojin karaa in taasi shaqayso. Waxaad ku qortaa cabbirrada pixels sababtoo ah waa sida ay dadka badankiisu u fikiraan, qalabkuna wuxuu u beddelaa rem adigoo isticmaalaya cabbirka fartaada asalka ah (root font size).

Ma u isticmaali karaa tan masaafada (spacing), ee ma aha oo kaliya cabbirka farta?

Haa. Qiimaha la midka ah wuxuu u shaqeeyaa padding, margin, gap, width ama height — meel kasta oo dherer la geliyo. U beddel hor-u-aragga Box si aad u daawato masaafada oo weynaanaysa halkii uu qoraal ahaan lahaa. Haddii cabbirkaaga yar iyo kan weyn ay isku mid yihiin, natiijadu waxay ku soo ururaysaa dherer go'an oo caadi ah, maadaama aysan jirin wax la miisaamo.

Miyaa dhammaan biraawsaradu taageeraan clamp()?

Haa — biraawsar kasta oo hadda jira wuxuu taageerayay clamp() ilaa 2020, markaa waxaad u diri kartaa qiimaha siduu yahay adigoon u baahnayn fallback. Markay tahay ugu badnaan aad u weyn ama isbeddel degdeg ah, waxaa habboon in si dhakhso ah loo hubiyo 200% zoom in qoraalku weli u weynaanayo akhristayaasha u baahan.

Dhaliyaha CSS Cubic BezierJiid labada gacan si aad u qaabayso qalooca, daawo dhibic raacaysa marka la barbardhigo mid joogto ah, oo koobiyeey qiimaha cubic-bezier().Dhaliyaha Box ShadowJiid jiidadaha si aad u qaabayso box-shadow, isku dul radd lakabyo si aad u hesho qoto-dheer, oo si degdeg ah u koobiyeey CSS-ka dhammaaday.Dhaliyaha GradientDhis gradient linear, radial, ama conic ah, ku dar istaagyada midabka oo dejiso jihada, ka dibna ku koobiyeey CSS-ka hal gujin.Dhaliyaha Border RadiusU wareeji gees kasta adigoo isticmaalaya jiidado, ku qaabeey qaabab dabiici ah habka elliptical-ka, oo si degdeg ah u koobiyeey CSS-ka.Dhaliyaha FlexboxU diyaari weel flex ah iyo walxihiisa adigoo isticmaalaya xakamaynta muuqaalka, daawo qaabka oo si toos ah u falcelinaya, oo ku koobiyeey CSS-ka hal gujin.Dhaliyaha CSS GridDejiso tiirarkaaga iyo safarkaaga, ku jiid unugyada dushooda si aad u dhigto walxaha, oo ku koobiyeey grid CSS-ka iyo HTML-ka u dhigma hal gujin.CSS Qurxiye & YareeyeDib u habee CSS-ka qasan si aad u akhrido, ama u yaree si aad u dirto — adoo adeegsanaya hab badbaado leh oo aan marna dib u habayn ku samaynayn xeerarkaaga.Beddelaha px to rem & emU beddel inta u dhaxaysa px, rem iyo em adigoo isticmaalaya cabbirrada fartaada asalka ah iyo macnaha guud — wax ka beddel goob kasta oo labada kale ayaa cusboonaysiismaya markaad qorayso.