Paano media queries suna wajen burewa a cikin responsive design?

Question

IT Interview Practice · Accepted Answer

**Media queries** suna amfani da CSS ta yarda da hanyar halayen na'ura — mafi yawan **lebar viewport** — wanda ke bada damar jerin styles guda daya na daidaita wa wayar hannu, tablet da burewan aiki.

```css
/* base styles (mobile-first) */
.container { padding: 1rem; }

/* apply only when viewport is AT LEAST 768px wide */
@media (min-width: 768px) {
  .container { padding: 2rem; display: grid; grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .container { grid-template-columns: 1fr 1fr 1fr; }
}
```

## Mobile-first (min-width) vs desktop-first (max-width)

```css
/* ✅ mobile-first: base = mobile, layer on enhancements as it gets wider */
@media (min-width: 768px) { ... }

/* desktop-first: base = desktop, override down for smaller screens */
@media (max-width: 767px) { ... }
```

**Mobile-first** (`min-width`) shine da aka gida a gaggawa: kana rubuta sauki tushe style don ƙaramine allon, sannan kake tara wahala a hankali ga masu canji. Wannan yana haifar da CSS mai tsafi da sauƙi, kuma yana daidai da yadda abubuwa suke sake bawa.

## Wasu ƙididdigar da akasashi

```css
@media (max-width: 600px) { }                 /* small screens */
@media (orientation: landscape) { }            /* device orientation */
@media (prefers-color-scheme: dark) { }        /* user wants dark mode */
@media (prefers-reduced-motion: reduce) { }    /* user dislikes animation — accessibility */
@media print { }                                /* print stylesheet */
```

`prefers-reduced-motion` da `prefers-color-scheme` suna amsa ga *buƙatun* mai amfani, ba size na screen ba — mahimmin aiki don iya samu da jajirewa.

## Hada haƙu takaddama

```css
@media (min-width: 768px) and (max-width: 1023px) { /* tablets only */ }
```

## Sanarwa akan jiya: container queries

Media queries suna amsa ga **viewport**; salo **container queries** (`@container`) suna amsa ga girman *abin da ya haifi* — mafi kyau ga abubuwan da akwai da aka saba — suke buƙata. Suna bambanar da media queries maimakon cire su.

## Me ta sa shi hadari

Media queries shine shafin ƙaura na responsive design — daidaita layout, nisan nisa da ginshiƙai zuwa size na screen.

Mobile-first `min-width` hanya ta katawa CSS mai ƙunshe, da buƙatun sha buniada (`prefers-reduced-motion`, `prefers-color-scheme`) suna kwarewa ƙunshe zuwa samun ilimi da jajirewa.

Mobile-first (min-width) vs desktop-first (max-width)

Wasu ƙididdigar da akasashi

Hada haƙu takaddama

Sanarwa akan jiya: container queries

Me ta sa shi hadari

Tambayoyi masu alaƙa