Naqshadaynta La-jaanqaada Shaashadaha (Responsive Design)

Mareegtaadu waa inay si qurux badan uga muuqataa shaashad kasta — mobilka, tablet-ka, iyo kombiyuutarka [1]. Naqshadaynta ku-habboonaanta shaashadaha (Responsive Design) waa farsamada lagu gaaro arrintaas [1]. Casharkaan waxaan ku baran doonaa habka Mobile-First Approach, weydiimaha warbaahinta (Media Queries), unugyada daaqada bog-furaha (Viewport Units), iyo farsamooyin kale oo muhiim ah.

Habka Mobile-First Approach

Habka Mobile-First wuxuu ka dhigan yahay inaad ka bilowdo naqshadaynta shaashadaha yaryar (mobilada), ka dibna aad ku darto CSS-ta loogu talagalay shaashadaha waaweyn:

/* Bilow: Mobilada — 1 Tiir */
.kaadhada {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Tablet-ka: 2 Tiir */
@media (min-width: 768px) {
  .kaadhada {
    grid-template-columns: 1fr 1fr;
  }
}

/* Desktop-ka: 3 Tiir */
@media (min-width: 1024px) {
  .kaadhada {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Faa’iidada habka Mobile-First: Waxay kugu qasbaysaa inaad marka hore dhisto qaab-dhismeed si fiican ugu shaqeeya meelaha cidhiidhiga ah, ka dibna aad sii ballariso marka uu boos ballaran soo baxo.

Weydiimaha Warbaahinta — `@media` (Media Queries)

Weydiinta Warbaahinta (Media Query) waa xeer CSS ah oo leh shardi (condition) — haddii shardigaasi uu buuxsamo (noqdo run), koodka CSS ee ku dhex jira ayaa la fuliyaa:

@media (shardiga) {
  /* CSS-kan ayaa shaqeeya haddii shardigu uu sax yahay */
}

Breakpoints-ka Caadiga Ah

Magaca	Ballaca Ugu Yar	Nooca Shaashadda
`sm`	480px	Mobilada waaweyn
`md`	768px	Tablet-ka (Toosan)
`lg`	1024px	Tablet-ka (Jiifa) / Desktop-ka yaryar
`xl`	1280px	Desktop-ka waaweyn

/* Mobilada Yaryar (< 480px) */    /* Habka caadiga ah — uma baahna media query */
@media (min-width: 480px) { /* Mobilada waaweyn */ }
@media (min-width: 768px) { /* Tablet-ka */ }
@media (min-width: 1024px) { /* Desktop-ka */ }
@media (min-width: 1280px) { /* Desktop-ka waaweyn */ }

Unugyada Daaqada Bog-furaha — `vw`, `vh`, `dvh`

Unugyadani waxay ku xiran yihiin cabbirka daaqada bog-furaha (Viewport), ee kuma xirna cabbirka curiyaha sare (waalidka):

.hero {
  height: 100vh;       /* 100% dhererka shaashadda */
  width: 100vw;        /* 100% ballaca shaashadda */
  padding: 5vw;        /* 5% oo ka mid ah ballaca shaashadda */
}

Unugga	Macnaha	Goorta la adeegsado
`vw`	1% oo ah ballaca viewport-ka	Habaynta ballaca curiyayaasha
`vh`	1% oo ah dhererka viewport-ka	Dhererka qaybaha waaweyn ee bogga
`dvh`	Dynamic viewport height	Mobilada (si looga fogaado dhibaatada baararka shaqada ee is-bedbeddela)
`vmin`	Kan ugu yar `vw` iyo `vh`	Cabbirid isku-dheelli tiran ee curiyayaasha
`vmax`	Kan ugu weyn `vw` iyo `vh`	Cabbirrada ugu waaweyn ee naqshadda

Ogow: Adeegsiga 100vw wuxuu mararka qaarkood keeni karaa baar jiif ah oo la dhaqaajiyo (horizontal scrollbar), sababtoo ah u dhex-xisaabinta baarka dhaqaajinta ee toosan (scrollbar). Sidaas darteed, waxaa inta badan habboon in la adeegsado width: 100%.

Sawirrada La-jaanqaada Shaashadda (Responsive Images)

Sawirradu waa inay si toos ah ula jaanqaadaan shaashadaha kala duwan:

img {
  max-width: 100%;
  height: auto;
  display: block;
}

Tani waxay ka dhigan tahay: Sawirku kama dhex bixi karo weelka uu ku jiro, laakiin wuu yaraanayaa si uu ula jaanqaado haddii boosku yaraado.

Cabbirka Farta ee Is-bedbeddela (Fluid Typography) — `clamp()`

Habka clamp(MIN, PREFERRED, MAX) wuxuu kuu sahlayaa inaad u cayimto farta cabbir isku-bedbeddela (fluid) oo u dhexeeya xadka ugu yar iyo kan ugu weyn:

h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  /* Ugu yaraan waa 1.5rem, ugu badnaanna waa 3rem, laakiin waxay la jaanqaadaysaa 4vw inta u dhaxaysa */
}

p {
  font-size: clamp(0.875rem, 2vw, 1.125rem);
}

Qiimaha	Sharaxaadda
`MIN`	Cabbirka ugu yar ee farta (Shaashadaha yaryar)
`PREFERRED`	Cabbirka la-jaanqaadaya shaashadda (Fluid size)
`MAX`	Cabbirka ugu weyn ee farta (Shaashadaha waaweyn)

Baarka shaqada (Nav) isna waa inuu noqdaa mid la-jaanqaada shaashadaha kala duwan:

.nav-links {
  display: flex;
  gap: 16px;
}

/* Mobilada: Menu-ga qarsoon */
@media (max-width: 767px) {
  .nav-links {
    display: none;             /* Qari */
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  .nav-links.open {
    display: flex;             /* Muuji marka la furo */
  }
}

Sifooyin Kale oo Muhiim u ah La-jaanqaadka

/** In xisaabinta dhumucda iyo padding-ka lagu dhex daro ballaca guud */
* { box-sizing: border-box; }

/** Jadwallada (Tables): In laga dhigo kuwo la dhaqaajin karo shaashadaha yaryar */
table { overflow-x: auto; display: block; }

/** Muuqaallada la dhexgeliyo (Embed videos) */
iframe, video { max-width: 100%; }

/** Weelka guud (Container caadi ah) */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

Tusaale Mashruuc Dhamaystiran oo ku saabsan Responsive Design

<!DOCTYPE html>
<html lang="so">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jawaab-celinta — Kaadhada</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: system-ui, sans-serif; background: #f8fafc; }

    /* Habka Mobile-First: 1 Tiir */
    .kaadhada {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      max-width: 1200px;
      margin: 0 auto;
      padding: 24px 16px;
    }

    .kaadhka {
      background: white;
      border-radius: 14px;
      border: 1px solid #e2e8f0;
      padding: 24px;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .kaadhka:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    }
    .kaadhka .icon { font-size: 1.75rem; margin-bottom: 8px; }
    .kaadhka h3 { font-size: clamp(0.95rem, 2vw, 1.15rem); color: #0f172a; margin-bottom: 6px; }
    .kaadhka p  { font-size: clamp(0.8rem, 1.5vw, 0.9rem); color: #64748b; line-height: 1.6; }
    .kaadhka .sawir {
      width: 100%;
      height: 160px;
      background: #e2e8f0;
      border-radius: 8px;
      margin-bottom: 14px;
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="%2394a3b8" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>');
      background-size: cover;
      background-position: center;
    }

    .cinwaanka-qaybta {
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 16px 0;
    }
    .cinwaanka-qaybta h1 {
      font-size: clamp(1.5rem, 5vw, 2.5rem);
      color: #0f172a;
    }
    .cinwaanka-qaybta p {
      font-size: clamp(0.85rem, 2vw, 1rem);
      color: #64748b;
      margin-top: 8px;
    }

    /* Tablet-ka: 2 Tiir */
    @media (min-width: 768px) {
      .kaadhada {
        grid-template-columns: 1fr 1fr;
        padding: 24px 32px;
      }
    }

    /* Desktop-ka: 3 Tiir */
    @media (min-width: 1024px) {
      .kaadhada {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 24px;
        padding: 32px 48px;
      }
    }
  </style>
</head>
<body>

  <div class="cinwaanka-qaybta">
    <h1>Casharrada CSS</h1>
    <p>Baro CSS bilow ilaa dhammaad — 20 cashar oo dhammaystiran.</p>
  </div>

  <div class="kaadhada">
    <div class="kaadhka">
      <div class="sawir" style="background-color:#fff7ed;"></div>
      <div class="icon">🎨</div>
      <h3>Midabada &amp; Gadaasha</h3>
      <p>Baro sida loo isticmaalo midabada, gradients, iyo gadaasha CSS.</p>
    </div>

    <div class="kaadhka">
      <div class="sawir" style="background-color:#f0fdf4;"></div>
      <div class="icon">📐</div>
      <h3>Flexbox</h3>
      <p>Nidaamka hal-jiho ee layout-ka — fudud oo xoog leh.</p>
    </div>

    <div class="kaadhka">
      <div class="sawir" style="background-color:#eff6ff;"></div>
      <div class="icon">🧩</div>
      <h3>CSS Grid</h3>
      <p>Nidaamka laba-jiho ee layout-ka — tiirar iyo safo.</p>
    </div>

    <div class="kaadhka">
      <div class="sawir" style="background-color:#fef2f2;"></div>
      <div class="icon">🖋️</div>
      <h3>Typography</h3>
      <p>Fonts, line-height, letter-spacing, iyo qoraalka.</p>
    </div>

    <div class="kaadhka">
      <div class="sawir" style="background-color:#f5f3ff;"></div>
      <div class="icon">✨</div>
      <h3>Animations</h3>
      <p>Dhaqdhaqaaqa, transitions, iyo keyframe animations.</p>
    </div>

    <div class="kaadhka">
      <div class="sawir" style="background-color:#fff1f2;"></div>
      <div class="icon">📱</div>
      <h3>Responsive Design</h3>
      <p>Bogag u shaqeeya shaashad kasta — mobile ilaa desktop.</p>
    </div>

    <div class="kaadhka">
      <div class="sawir" style="background-color:#f0f9ff;"></div>
      <div class="icon">🌙</div>
      <h3>Dark Mode</h3>
      <p>CSS custom properties iyo theme switcher.</p>
    </div>

    <div class="kaadhka">
      <div class="sawir" style="background-color:#fefce8;"></div>
      <div class="icon">📊</div>
      <h3>Tables &amp; Lists</h3>
      <p>Jadwallada iyo liisaska quruxda badan.</p>
    </div>
  </div>

</body>
</html>

Casharka xiga: Waxaan ku baran doonaa Beddelayaasha CSS (Custom Properties / CSS Variables).

Naqshadaynta La-jaanqaada Shaashadaha (Responsive Design)

Habka Mobile-First Approach

Weydiimaha Warbaahinta — `@media` (Media Queries)

Breakpoints-ka Caadiga Ah

Unugyada Daaqada Bog-furaha — `vw`, `vh`, `dvh`

Sawirrada La-jaanqaada Shaashadda (Responsive Images)

Cabbirka Farta ee Is-bedbeddela (Fluid Typography) — `clamp()`

Hamburger Menu-ga Mobilada (Responsive Nav)

Sifooyin Kale oo Muhiim u ah La-jaanqaadka

Tusaale Mashruuc Dhamaystiran oo ku saabsan Responsive Design

Ready to learn
something new?

Habka Mobile-First Approach

Weydiimaha Warbaahinta — @media (Media Queries)

Breakpoints-ka Caadiga Ah

Unugyada Daaqada Bog-furaha — vw, vh, dvh

Sawirrada La-jaanqaada Shaashadda (Responsive Images)

Cabbirka Farta ee Is-bedbeddela (Fluid Typography) — clamp()

Hamburger Menu-ga Mobilada (Responsive Nav)

Sifooyin Kale oo Muhiim u ah La-jaanqaadka

Tusaale Mashruuc Dhamaystiran oo ku saabsan Responsive Design

Ready to learn something new?

Weydiimaha Warbaahinta — `@media` (Media Queries)

Unugyada Daaqada Bog-furaha — `vw`, `vh`, `dvh`

Cabbirka Farta ee Is-bedbeddela (Fluid Typography) — `clamp()`

Ready to learn
something new?