Mkakati wa kujibu wa mobile-first ni nini, na container queries zinaingiaje?

Question

Accepted Answer

**Mobile-first** humaanisha kuandika mitindo yako ya msingi kwa **skrini ndogo zaidi**, kisha *kuongeza* utata kwa skrini kubwa zaidi kwa media queries za `min-width` — badala ya kuanzia desktop na kuondoa mambo.

## Mobile-first katika vitendo

```css
/* base: mobile — single column, simple */
.layout { display: grid; gap: 1rem; }

/* enhance for tablet and up */
@media (min-width: 768px) {
  .layout { grid-template-columns: 1fr 2fr; }
}
/* enhance further for desktop */
@media (min-width: 1200px) {
  .layout { grid-template-columns: 1fr 2fr 1fr; }
}
```

**Kwa nini mobile-first hushinda:** CSS ya msingi hubaki ndogo (mobile hupata tu kile inachohitaji — vizuri kwa utendaji kwenye vifaa dhaifu), na *unaongeza* utata, jambo ambalo ni rahisi zaidi kufikiri kuliko kuubatilisha/kuuondoa. Pia inalingana na jinsi maudhui yanavyobadilika kiasili kutoka nguzo moja hadi nyingi.

## Kikomo cha media queries

Media queries hujibu **viewport** — dirisha lote. Lakini kipengele kinachoweza kutumika tena (sema kadi) kinaweza kuonekana katika eneo kuu pana *au* sidebar nyembamba kwenye ukurasa mmoja. Upana wa viewport hauwezi kukuambia kiasi gani cha nafasi *kipengele* kinachokuwa nacho hasa.

## Container queries hutatua hili

```css
.card-wrapper {
  container-type: inline-size;  /* declare it a query container */
}

/* style the card based on the CONTAINER's width, not the viewport */
@container (min-width: 400px) {
  .card { display: grid; grid-template-columns: auto 1fr; }
}
```

Sasa kadi ile ile hubadilika kiotomatiki hadi mpangilio wa mlalo wakati wowote *container yake* ina ≥400px — iwe ni kwa sababu skrini ni kubwa au kwa sababu iko kwenye nguzo pana. Kipengele kinakuwa kweli **huru kwa muktadha na kinachoweza kutumika tena**.

## Zinakamilishana

- **Media queries** — mpangilio wa kiwango cha ukurasa, breakpoints za jumla, mapendeleo ya mtumiaji (dark mode, reduced motion).
- **Container queries** — ujibikaji wa kiwango cha kipengele kwa vipengele vinavyoweza kutumika tena.

## Kwa nini ni muhimu

Mobile-first huifanya CSS inayojibu iwe nyepesi na inayotunzwa kwa urahisi.

Container queries ni hatua kubwa mbele: zinawezesha vipengele kujibu nafasi *yao wenyewe* inayopatikana, ambayo ndiyo unayohitaji haswa katika usanifu unaotegemea vipengele (design systems, kadi/widgets zinazoweza kutumika tena) ambapo kipengele kile kile huishia katika miktadha mingi.