Hvordan muliggjør mediespørringer responsivt design?

Question

Accepted Answer

**Mediespørringer** bruker CSS betinget basert på enhetskjennetegn — oftest **viewport-bredden** — slik at ett stilark kan tilpasse seg telefoner, nettbrett og stasjonære datamaskiner.

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

## Mobil-først (min-width) vs stasjonær-først (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) { ... }
```

**Mobil-først** (`min-width`) er vanligvis foretrukket: du skriver enkle basisstilar for små skjermer, og legger så til kompleksitet for større skjermer. Dette gir vanligvis renere og lettere CSS og samsvarer bedre med hvordan innhold tilpasses.

## Andre nyttige spørringer

```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` og `prefers-color-scheme` reagerer på bruker*preferanser*, ikke skjermstørrelse — viktig for tilgjengelighet og tema.

## Kombinere betingelser

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

## En merknad om fremtiden: beholdersspørringer

Mediaspørringer reagerer på **viewport**; de nyere **beholdersspørringene** (`@container`) reagerer på størrelsen på et *overordnet element* — bedre for virkelig gjenbrukbare komponenter. De utfyller mediespørringer i stedet for å erstatte dem.

## Hvorfor det betyr noe

Mediaspørringer er grunnlaget for responsivt design — tilpasning av layout, mellomrom og kolonner til skjermstørrelse.

Mobil-først `min-width` tilnærmingen holder CSS håndterbar, og preferanse-spørringer (`prefers-reduced-motion`, `prefers-color-scheme`) utvider responsivitet til tilgjengelighet og tema.