Vad är en mobile-first responsiv strategi, och hur passar container queries in?

Question

Accepted Answer

**Mobile-first** betyder att du skriver dina basstylningar för den **minsta skärmen**, och sedan *lägger till* komplexitet för större skärmar med `min-width` mediafrågor — snarare än att börja på desktop och ta bort saker.

## Mobile-first i praktiken

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

**Varför mobile-first är vinnande:** bas-CSS förblir minimal (mobila enheter får bara det de behöver — bra för prestanda på svagare enheter), och du *lägger på* komplexitet, vilket är lättare att resonera om än att åsidosätta/ta bort den. Det motsvarar också hur innehåll naturligt omflödar från en kolumn till många.

## Begränsningen med mediafrågor

Mediafrågor svarar på **viewporten** — hela fönstret. Men en återanvändbar komponent (säg ett kort) kan visas i ett bredt huvudområde *eller* en smal sidopanel på samma sida. Viewportens bredd kan inte berätta hur mycket utrymme komponenten *faktiskt* har.

## Container queries löser detta

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

Nu växlar samma kort automatiskt till en horisontell layout när *dess container* är ≥400px — oavsett om det är för att skärmen är stor eller för att den är i en bred kolumn. Komponenten blir verkligt **kontextoberoende och återanvändbar**.

## De kompletterar varandra

- **Mediafrågor** — sidlayouter, globala brytpunkter, användarinställningar (mörkt läge, reducerad rörelse).
- **Container queries** — komponentnivå responsivitet för återanvändbara komponenter.

## Varför det spelar roll

Mobile-first håller responsiv CSS lätt och underhållbar.

Container queries är ett stort framsteg: de låter komponenter svara på deras *eget* tillgängliga utrymme, vilket är exakt vad du behöver i en komponentbaserad arkitektur (designsystem, återanvändbara kort/widgetar) där samma komponent hamnar i många sammanhang.