Websites ka waxaa laga soo booqan karaa dhamaan agabyada internet ka sida (desktops, tablets, iyo mobiles) web kaagana waa in device walba ku wanaagsanaadaa. Si arinkaan loo xaliyo waxaa la isticmaalaa wax loo yaqaano responsive web design.

CSS ayaaa loo issticmaalaa si aad u cabbirto, u qariso, u yarayso, u weynayso, ama aad u dhaqaajiso waxa ku jira si ay ugu ekaato mid ku fiican shaashad kasta.

Viewport waa halka uu user-ku ka arkikaro webka.viewport wuu ku kala duwan yahay aaladdaha, mobile ka wuu ka yaraan doonaa shaashadda kombayutarka.

HTML5 waxay soo bandhigtay hab u ogolaanaya web designers ka inay gacanta ku dhigaan viewport, iyada oo loo marayo <meta> tag. Waa inaad ku dartaa waxyaabaha soo socda ee <meta> viewport dhammaan web pages kaaga:

Arinkaan web browser ka waxey u sheegaasaa sida uu u maamulilahaa web page ka cabirkiisa (dimensions iyo scaling)

width=device-width waxey website ka ka dhigeysaa mid raaca cabir ka screen ka device ka.

initial-scale=1.0 waxey saxeysaa heerka zoomka, marka hore ee page ku uu load gareeyo web browser ka.

Waakan sawir tusaale u ah web page aan laheyn meta tag iyo isla web page kaas oo leh meta tag mid leh.

Inta badan web pages ku waa kuwa grid-view ah, taaso micnaheed ah in web pages ku loo qeybinaayo columns.

Marka hore hubi in dhamaan elements ka HTML ka in aad siido property ga box-sizing kana dhigto border-box.Tani waxey ka dhigeysaa in padding ka iyo border ka lagu xisaabiyo width iyo height ga elements-ga.

Kudar code kaan CSS taada:

Tusaalahaan soosocda waxa uu ku tusinayaa simple responsive page labo columns ahaan ah.

Tusaalahaan wuu ku filan yahay web pages leh labo columns.

Tusaale kale oo 12 columns ah, si aan si fiican ugu fahanno.

Maadaama aan rabno 12 columns marka hore waa inaa xisaabinaa percentage ahaan halkii column: 100% / 12 columns = 8.33%. tani waa xisaabin uu lahaanaayo halkii column hadii aan rabno 12.

12 columns ka waxaan percentage ahaan ugu xisaabiyay maadaama aad u baahan karto columns badan lkn inta badan kama bataan 12 columns. base ayeena u tahay.

Tusaale, u kala qaad page kaaga 12 columns, Hadii aad rabto inaa isticmaasho 2 column waxad mid kiiba ka dhigi 6 column cabir kiisa oo ah 50% ama labii column mid inuu weenaado hadaa rabto mid waxaad ka dhigi 3 column oo ah 25% mid ka kalena 9 column oo ah 75% hadaa rabtana hal column isticmaal cabirka 12 column oo ah 100%.

Note: Arinkaan kama dhigeeso web page kaaga responsive ama mid yarada marka la yareeyo browser window ga, lkn waa u muhiim si aad ugu kala maamusho responsive.

Media query waa CSS technique lagu soo daray CSS3.

Waxey isticmaashaa @media si uu waxbadal ugu sameeyo hadii ay xaalad hebel ay true tahay.

Hadii browser window ga uu yahay 600px ama ka yar background color ka waxa uu noqon lightblue:

Media queries waxay naga caawinayaa in aan kusoo darno breakpoint qeybtaan rabno.

si aad u sameydo breakpoint marka hore waa inaa isticmaashaa @media only screen and (max-width: size) or @media only screen and (min-width: size).

Max-width markaa isticmaaleyso waxaad sheegeysaa in rules ka aad qortay uu ku dhaqan galaayo wixii ka yar cabir kaad bixisay.

Code kaan waxa uu ku dhaqan galayaa wixii ka yar 600px.

Min-width ku waxaad sheegeysaa in rules kaan aad qortay uu ku dhaqan galaayo wixii ka badan cabirkaad bixisay.

Code kaan waxa uu ku dhaqan galayaa wixii ka badan 768px.

Waa tusaalihii aan marka hore kusoo qaadanay si aan u sharaxno responsive design lkn hada waan fahmi karnaa.

Cabirada breakpoints ka ee inta badan devices ka.

Waxaan kaloo Media queries ka u isticmaali karnaa anagoo ku badbadaleena layout ka page ayadoo aan u fiirineeno orientation ka browser ka.



Elements waan ku qarin karnaa

Font-size waan ku maamuli karnaa



Hadii aad rabto in aad ka dhigto inta badan sizes ka two column layout. hal column na screens ka yar (sida mobiles iyo tablets) waxaad si fudud flex-direction ka badali row adoo ka dhigaayo column.

Output

Adigo percentage ahaan width u kala jaan goynaayana waad isticmaali kartaa lkn waa inaa flex-wrap isticmaashaa kana dhigtaa wrap. flex-wrap: wrap;

Sida flexbox oo kale Grid ka xitaa responsive waan kadhigi karnaa anagoo grid-template-columns ka ka soo muujineeno 3, tablet ahaan mobile ahaanna 2 column.

Dhamaad.