Le responsive design avec les media queries

Sans une certaine balise meta, beaucoup de téléphones mettent la page en forme comme si l'écran était bien plus large (MDN donne l'exemple de 980 pixels) puis la réduisent : une media query pour téléphone ne s'applique alors jamais.

Une page, tous les écrans

Le responsive design (conception adaptative) consiste à construire une seule page qui s'adapte à l'écran sur lequel elle s'affiche, d'un téléphone étroit à un grand moniteur, au lieu de créer un site mobile séparé. Il repose sur trois idées : une mise en page faite de largeurs flexibles plutôt que fixes, des médias qui s'adaptent à leur conteneur, et des media queries qui ajustent la mise en page là où elle cesse de fonctionner. Flexbox et grid font déjà une grande partie du travail, comme l'ont montré les deux dernières unités avec les cartes qui passent à la ligne et les colonnes auto-fill.

La balise meta viewport

Beaucoup de téléphones affichent les pages dans une fenêtre virtuelle plus large que l'écran (MDN donne l'exemple de 980 pixels), puis réduisent le résultat, parce que les anciens sites étaient conçus pour les ordinateurs de bureau. Pour une page prévue pour s'adapter, c'est gênant : une media query qui devrait s'activer sous 600 pixels ne s'applique jamais, car le navigateur croit que l'écran fait 980 pixels de large. <meta name="viewport" content="width=device-width"> dans le head indique au navigateur d'utiliser la largeur réelle de l'appareil, mesurée en pixels CSS. N'ajoute jamais user-scalable=no ni un maximum-scale faible ; MDN prévient que bloquer le zoom exclut les personnes malvoyantes, et le critère WCAG 1.4.4 attend que le texte puisse être agrandi jusqu'à 200 pour cent.

Largeurs fluides et images

Les largeurs fixes sont la cause la plus fréquente du défilement horizontal sur téléphone. Préfère max-width à width : max-width: 70rem sur un conteneur de page lui permet de remplir un petit écran et de cesser de grandir sur un grand. Par défaut, les images gardent leur taille naturelle en pixels : une photo de 1200 pixels déborde donc d'un écran de 390 pixels. img { max-width: 100%; height: auto; } permet aux images de rétrécir pour tenir dans leur conteneur tout en gardant leurs proportions. Le critère WCAG 1.4.10, Reflow (redistribution), demande que le contenu fonctionne sur une largeur de 320 pixels CSS sans défilement dans deux directions ; vérifier ta page dans une fenêtre de 320 pixels de large est une bonne habitude.

Les media queries

Une media query entoure des règles qui ne s'appliquent que lorsqu'une condition est vraie. @media (min-width: 600px) { ... } applique ses règles quand la fenêtre d'affichage fait au moins 600 pixels de large. L'approche habituelle est le mobile first : écrire d'abord les styles de base pour un écran étroit, souvent les plus simples (une colonne, tout empilé), puis ajouter des requêtes min-width qui réorganisent les choses quand la place augmente. Choisis les points de rupture là où ton contenu commence à mal s'afficher, sans deviner les tailles d'appareils à la mode, car de nouvelles tailles d'écran apparaissent chaque année. Écrire les points de rupture en em, comme 40em, les fait aussi réagir quand un lecteur agrandit le texte.

/* Base: one column for narrow screens */
.cols { display: grid; gap: 16px; }

/* From 600px: two columns */
@media (min-width: 600px) {
  .cols { grid-template-columns: 1fr 1fr; }
}

/* From 960px: a sidebar layout */
@media (min-width: 960px) {
  .cols { grid-template-columns: 240px 1fr 1fr; }
}

Ce qu'une requête peut tester d'autre

Les media queries peuvent tester autre chose que la largeur. Les caractéristiques de préférence du lecteur viennent de Media Queries Level 5 : (prefers-color-scheme: dark) correspond quand le lecteur a choisi un thème sombre dans le système d'exploitation, ce qui permet de proposer automatiquement des couleurs sombres. (prefers-reduced-motion: reduce) correspond quand le lecteur a demandé moins de mouvement, souvent parce que les animations lui donnent le vertige ; désactive à l'intérieur les grands mouvements et les effets de parallaxe. (hover: hover), du niveau 4, indique si le pointeur principal peut survoler, ce qu'un écran tactile ne peut pas faire. print met en forme une page pour le papier, par exemple en masquant le menu. Enfin, clamp() dimensionne les choses en douceur sans requête : font-size: clamp(1.5rem, 4vw, 2.5rem) grandit avec l'écran mais ne descend jamais sous 1.5rem et ne dépasse jamais 2.5rem.