Naqshadda Isku-beddesha

Casharkaan, waxaan baran doonaa naqshadda isku-beddesha (responsive design) — farshaxanka ka dhiga boggaaga mid si fiican uga shaqeeya qalab kasta (moobil, tablet, desktop).

1. Waa maxay Responsive Design?

Responsive design waa habka lagu dhiso mareeg si ay isu habeyso cabbir kasta oo shaashad ah — 375px ee iPhone-ka ilaa 1920px ee desktop-ka.

2. Viewport Meta Tag

Si responsive design u shaqeeyo, waa inaad ku darto summada viewport-ka gudaha <head>-ka:

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

Tani waxay u sheegtaa biraawsarka inuu isticmaalo ballaca qalabka (device width).

3. Media Queries

Media queries waxay kuu ogolaanayaan inaad qorto CSS kala duwan cabbirrada shaashadda kala duwan.

/* Desktop-ka weyn (default) */
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

/* Tablets < 768px */
@media (max-width: 768px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Moobilada < 480px */
@media (max-width: 480px) {
    .container {
        grid-template-columns: 1fr;
    }
}

4. Breakpoints-ka Caadiga ah

/* Mobile-ka (uga yar 640px) — caadiga ah */

/* Tablet (640px-1024px) */
@media (min-width: 640px) { ... }

/* Desktop-ka yar (1024px-1280px) */
@media (min-width: 1024px) { ... }

/* Desktop-ka weyn (> 1280px) */
@media (min-width: 1280px) { ... }

Habka ugu fiican (Mobile-first): Qor marka hore CSS-ga moobilada, ka dibna ku dar media queries si aad u ballaariso.

5. Unugyada Dabacsan (Flexible Units)

Isticmaal unugyo dabacsan halkii aad ka isticmaali lahayd pixels:

.container {
    width: 100%;           /* 100% ee waalidka */
    max-width: 1200px;     /* laakiin ka weynaan maayo 1200px */
    margin: 0 auto;        /* dhex-marnaan */
}

h1 {
    font-size: clamp(1.5rem, 4vw, 3rem);  /* ugu yar 1.5rem, ugu weyn 3rem */
}

img {
    max-width: 100%;       /* sawirku waa uu isku habeyn doonaa */
    height: auto;
}

6. Tijaabada

Hubi in boggaagu u shaqeeyo cabbirrada kala duwan:

Chrome DevTools → Toggle Device Toolbar (Ctrl+Shift+M)
Dooro iPhone, iPad, Pixel, Desktop.
Hubi in qoraalku la akhriyi karo, badhamadu la riixi karo, walxahuna aysan is daboolin.

Layli (Practice)

Abuur grid 3 tiir ah, ka dibna isticmaal media queries si aad uga dhigto 2 tiir tablet-ka iyo 1 tiir moobilka.
Isticmaal clamp() si aad u cabbiriso cinwaanka weyn.
Ku dar sawir iyo max-width: 100%.
Mobile-first: qor marka hore qaabka moobilka, ka dibna ku dar desktop-ka.

Sii wadashada: Casharka xigta, waxaan baran doonaa beddelayaasha CSS (CSS variables)!