Hvordan gør mediespørgsmål responsivt design muligt?

Question

IT Interview Practice · Accepted Answer

**Mediespørgsmål** anvender CSS betinget baseret på enhedskarakteristika — oftest **viewport-bredde** — hvilket giver ét stylesheet mulighed for at tilpasse sig telefoner, tablets og computere.

```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`) foretrækkes generelt: du skriver simple basisstilar til små skærme og tilføjer derefter gradvist kompleksitet til større. Dette har tendens til at producere renere, lettere CSS og stemmer overens med, hvordan indholdet reflowes.

## Andre nyttige spørgsmål

```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å brugerens *præferencer*, ikke skærmstørrelse — vigtig for tilgængelighed og tematisering.

## Kombinering af betingelser

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

## En note om fremtiden: containerforespørgsler

Mediaespørgsmål reagerer på **viewport**; nyere **containerforespørgsler** (`@container`) reagerer på en *forælders elements* størrelse — bedre til virkelig genanvendelige komponenter. De supplerer snarere end erstatteren mediespørgsmål.

## Hvorfor det er vigtig

Mediaespørgsmål er grundlaget for responsivt design — tilpasning af layout, afstand og kolonner til skærmstørrelse.

Mobile-first `min-width`-tilgangen holder CSS håndterbar, og præferenceforespørgsler (`prefers-reduced-motion`, `prefers-color-scheme`) udvider responsivitet til tilgængelighed og tematisering.

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

Andre nyttige spørgsmål

Kombinering af betingelser

En note om fremtiden: containerforespørgsler

Hvorfor det er vigtig

Relaterede spørgsmål