Responsive design and media queries

 Naqshad Laqabsata (Responsive Design) iyo Media Queries

Hordhac

Dunida casriga ah ee internet-ka, waxa muhiim ah in mareegaha (websites) ay si habsami leh uga shaqeeyaan dhammaan aaladaha kala duwan sida kombiyuutarrada, tablets-ka, iyo taleefannada casriga ah. Naqshad laqabsata (Responsive Design) waa farsamo u sahlaysa websaydhada inay si fiican uga muuqdaan shaashado kala duwan iyagoo isticmaalaya CSS media queries.

Responsive 

Waa Maxay Naqshad Laqabsata (Responsive Design)?

Naqshad laqabsata waa hab naqshadeed oo u oggolaanaya websaydhada inay la qabsadaan cabbirka shaashadaha kala duwan. Marka aad isticmaasho naqshad laqabsata, waxaa la hubinayaa in isticmaalayaashu ay helaan waayo-aragnimo wanaagsan, iyadoon loo eegin aaladda ay adeegsanayaan.

Faa’iidooyinka Responsive Design

• Waayo-aragnimo wanaagsan: Websaydhku wuxuu si fiican uga shaqeynayaa aaladaha kala duwan.
• SEO ka wanaagsan: Google wuxuu mudnaanta siiyaa boggaga laqabsada aaladaha kala duwan.
• Horumarin fudud: Hal naqshad ayaa ku filan halkii laga sameyn lahaa bogag kala duwan.
• Kordhinta booqashooyinka: Dadka isticmaalaya taleefannada iyo tablets-ka ayaa si fudud u isticmaali kara boggaaga.

Media Queries iyo Sida Loo Isticmaalo

Responsive 

Media Queries waa qaybo ka mid ah CSS oo kuu oggolaanaya inaad habayn karto naqshadda boggaaga iyadoo ku saleysan cabbirka shaashadda, nooca qalabka, iyo astaamo kale.

Qaab-dhismeedka Media Queries

Media queries waxaa lagu qoraa CSS waxaana loo adeegsadaa sidatan:

@media (max-width: 768px) {
    body {
        background-color: lightgray;
    }
}

Sharaxaad:

• Xeerkan wuxuu beddelayaa midabka asalka ah ee bogga marka ballaca shaashadda uu ka yaraado 768px, taasoo ah cabbirka badanaa loo isticmaalo taleefannada casriga ah.

Tusaale Dhameystiran

/* Naqshad guud */
.container {
    width: 80%;
    margin: auto;
}

/* Markay shaashadu yartahay */
@media (max-width: 768px) {
    .container {
        width: 100%;
        padding: 10px;
    }
}

/* Markay shaashadu aad u yartahay (Mobile) */
@media (max-width: 480px) {
    .container {
        width: 90%;
        font-size: 14px;
    }
}

Talooyin Muhiim ah

• Had iyo jeer isticmaal relative units sida em, rem, ama % halkii aad ka isticmaali lahayd pixels si boggu u noqdo mid laqabsada.
• Adeegso flexbox ama CSS Grid si aad si sahlan ugu maamusho qaab-dhismeedka boggaaga.
• Hubi inaad isticmaasho meta viewport tag si aad u xaqiijiso in boggaagu si sax ah ugu muuqdo aaladaha mobilada:

  <meta name="viewport" content="width=device-width, initial-scale=1">
  

Gunaanad

Naqshad laqabsata iyo media queries waa arrimo muhiim u ah casriyeynta mareegaha casriga ah. Iyadoo la adeegsanayo farsamooyinkan, waxaa suurtagal ah in la sameeyo websaydh si fiican uga shaqeeya aalad kasta, taasoo sare u qaadaysa waayo-aragnimada isticmaaleyaasha.

Haddii aad rabto in boggaaga noqdo mid casri ah, laqabsada, oo si fiican u shaqeeya dhammaan aaladaha, waa muhiim inaad baratid oo aad si fiican u isticmaashid Responsive Design iyo Media Queries!