Hoe maken media queries responsive design mogelijk?

Question

Accepted Answer

**Media queries** passen CSS voorwaardelijk toe op basis van apparaatkenmerken — meestal de **viewport-breedte** — waardoor één stylesheet zich kan aanpassen aan telefoons, tablets en desktops.

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

## Waarom het belangrijk is

```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`) verdient meestal de voorkeur: je schrijft eenvoudige basisstijlen voor kleine schermen en voegt dan geleidelijk complexiteit toe voor grotere schermen. Dit resulteert meestal in schonere, lichtere CSS en sluit beter aan bij hoe inhoud zich aanpast.

## Andere nuttige queries

```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` en `prefers-color-scheme` reageren op gebruikers*voorkeuren*, niet op schermgrootte — belangrijk voor toegankelijkheid en thema's.

## Voorwaarden combineren

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

## Een opmerking over de toekomst: container queries

Media queries reageren op de **viewport**; de nieuwere **container queries** (`@container`) reageren op de grootte van een *bovenliggend element* — beter voor echt herbruikbare componenten. Ze vullen media queries aan in plaats van ze te vervangen.

## Waarom het belangrijk is

Media queries zijn de basis van responsive design — het aanpassen van indeling, afstand en kolommen aan de schermgrootte.

De mobile-first `min-width` aanpak houdt CSS beheerbaar, en voorkeur queries (`prefers-reduced-motion`, `prefers-color-scheme`) breiden responsiviteit uit naar toegankelijkheid en thema's.