Apa iku strategi mobile-first responsive, lan kepriye container queries pas ngene?

Question

Accepted Answer

**Mobile-first** tegese nulis gaya dasar kanggo **layar paling cilik**, banjur *nambah* keruwetan kanggo layar gedhe nganggo `min-width` media queries — tinimbang mulia saka desktop terus nyisihake barang.

## Mobile-first ing praktik

```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; }
}
```

**Apa mobile-first menang:** CSS dasar tetep minimal (mobile mung entuk apa sing diperlu — apik kanggo performa ing piranti sing lemah), lan sampeyan *mbarake* keruwetan, sing luwih gampang dipikir tinimbang nglangi/ngilangi iku. Iku uga cocog karo cara konten alam-alaman ngisi ulang saka kolom siji menyang akeh.

## Kakirangan media queries

Media queries nanggapi **viewport** — jendhela kabeh. Nanging komponen sing bisa dianggo maneh (carane kertu) bisa ana ing area utama sing luas *utawa* sidebar sing sempit ing kaca sing padha. Jembar viewport ora bisa ngukur berapa kamar sing *komponen* kuwi wis ana.

## Container queries ngatasi iki

```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; }
}
```

Saiki kertu sing padha otomatis ngalih menyang tata letak mendatar nalika *kontainere* ≥400px — apa iku amarga layar gedhe utawa amarga ana ing kolom sing luas. Komponen dadi bener-bener **independent konteks lan bisa dianggo maneh**.

## Padha-padha mbantu

- **Media queries** — tata letak tingkat kaca, breakpoint global, kasengguhan pangguna (mode gelap, gerak suda).
- **Container queries** — responsivitas tingkat komponen kanggo komponen sing bisa dianggo maneh.

## Apa iku pentinge

Mobile-first nggawe CSS responsive tetep ramping lan gampang dipangani.

Container queries minangka kemajuan gedhe: padha ngidini komponen nanggapi *ruang siji-siji*, sing pancen apa sing perlu ing arsitektur adhedhasar komponen (sistem desain, kertu/widget sing bisa dianggo maneh) ing ngendi komponen padha ana ing akeh konteks.