Comment les media queries permettent-elles un design réactif ?

Question

Accepted Answer

**Les media queries** appliquent du CSS conditionnellement en fonction des caractéristiques de l'appareil — le plus souvent la **largeur de la zone de visualisation** — permettant à une seule feuille de styles de s'adapter aux téléphones, tablettes et ordinateurs de bureau.

```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`) est généralement préféré : vous écrivez des styles de base simples pour les petits écrans, puis ajoutez progressivement de la complexité pour les plus grands. Cela tend à produire du CSS plus propre et léger, et correspond à la façon dont le contenu se réorganise.

## Autres requêtes utiles

```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` et `prefers-color-scheme` répondent aux *préférences* de l'utilisateur, non à la taille de l'écran — important pour l'accessibilité et la personnalisation des thèmes.

## Combinaison de conditions

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

## Une remarque sur l'avenir : container queries

Les media queries répondent à la **zone de visualisation** ; les plus récentes **container queries** (`@container`) répondent à la taille d'un *élément parent* — mieux pour les composants vraiment réutilisables. Elles complètent les media queries plutôt que de les remplacer.

## Pourquoi c'est important

Les media queries sont la fondation du design réactif — adapter la mise en page, l'espacement et les colonnes à la taille de l'écran.

L'approche `min-width` mobile-first garde le CSS gérable, et les requêtes de préférences (`prefers-reduced-motion`, `prefers-color-scheme`) étendent la réactivité à l'accessibilité et à la personnalisation des thèmes.