Responsive design : media queries et images responsives

Le responsive design (conception adaptative) consiste à écrire une seule page qui s'adapte à toutes les tailles d'écran, du téléphone au grand moniteur, grâce à des mises en page fluides, des media queries CSS et des images servies à la bonne taille. Ce chapitre explique la balise viewport, l'approche mobile first, la syntaxe des media queries et des container queries, les tailles fluides avec clamp(), les images responsives (srcset, <picture>, WebP, AVIF) et les Core Web Vitals, ces indicateurs de vitesse que Google mesure.

La balise meta viewport

Sans indication, un navigateur mobile suppose que la page a été conçue pour un écran de bureau : il la met en page sur une largeur fictive d'environ 980 pixels, puis la rétrécit pour qu'elle tienne dans l'écran. Résultat : un texte minuscule qu'il faut zoomer. La balise viewport, dans le <head>, lui dit d'utiliser la vraie largeur de l'écran :

<meta name="viewport" content="width=device-width, initial-scale=1">

Une media query ne sert à rien sans cette balise : sur téléphone, la « largeur » vue par le CSS resterait de 980 px.

Mobile first et points de rupture

Il y a deux façons d'écrire un CSS responsive :

• desktop first : on écrit la version grand écran, puis on la défait pour les petits écrans avec des max-width ;
• mobile first : on écrit d'abord la version mobile, la plus simple (une colonne), puis on l'enrichit pour les écrans plus larges avec des min-width.

L'approche mobile first est la recommandation actuelle : la version mobile est la base, elle ne reçoit aucune règle inutile ; on ajoute de la complexité seulement quand il y a de la place ; et elle oblige à se concentrer sur l'essentiel du contenu. Google, d'ailleurs, explore et classe les sites d'après leur version mobile.

/* Base : téléphone, une colonne */
.grille-ateliers {
  display: grid;
  gap: 1rem;
}

/* À partir de 40rem (640 px) : deux colonnes */
@media (width >= 40rem) {
  .grille-ateliers {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* À partir de 64rem (1 024 px) : trois colonnes */
@media (width >= 64rem) {
  .grille-ateliers {
    grid-template-columns: repeat(3, 1fr);
  }
}

Les valeurs où la mise en page change sont les points de rupture (breakpoints). Ne les choisis pas d'après des modèles de téléphones (il en sort tous les mois) mais d'après ton contenu : élargis la fenêtre du navigateur progressivement et ajoute un point de rupture là où la mise en page devient moche (lignes trop longues, cartes trop étirées). Trois ou quatre points suffisent pour la plupart des sites ; souvent autour de 40rem, 48rem et 64rem.

La syntaxe des media queries

@media (width >= 48rem) { … }                  /* largeur d'au moins 48rem */
@media (min-width: 48rem) { … }                /* la même chose, écriture classique */
@media (40rem <= width < 64rem) { … }          /* entre deux valeurs */
@media (orientation: landscape) { … }          /* écran plus large que haut */
@media (hover: hover) and (pointer: fine) { … }/* souris : le survol existe */
@media print { … }                             /* à l'impression */
@media (prefers-color-scheme: dark) { … }      /* l'utilisateur a choisi le mode sombre */
@media (prefers-reduced-motion: reduce) { … }  /* l'utilisateur demande moins d'animations */

L'écriture avec comparaisons (width >= 48rem) est reconnue par tous les navigateurs actuels depuis 2023 ; tu croiseras encore très souvent min-width et max-width dans le code existant, qui veulent dire la même chose (min-width: 48rem équivaut à width >= 48rem).

@media print {
  header nav,
  footer,
  .bouton {
    display: none;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";   /* imprime l'adresse des liens externes */
  }
}

Des tailles fluides : pourcentages, max-width et clamp()

Une mise en page responsive est d'abord fluide : pas de largeurs fixes en pixels, mais des pourcentages, des fr, des max-width.

img,
video {
  max-width: 100%;   /* une image ne dépasse jamais son conteneur */
  height: auto;      /* et garde ses proportions */
}

.contenu {
  width: min(100% - 2rem, 70rem);   /* 70rem au plus, et toujours 1rem d'air de chaque côté */
  margin-inline: auto;
}

La fonction clamp(minimum, idéal, maximum) donne une valeur qui suit l'idéal tout en restant entre deux bornes. Elle rend un titre fluide, sans media query :

h1 {
  font-size: clamp(1.75rem, 1.25rem + 2vw, 3rem);
}

Sur un téléphone de 360 px de large, 2vw vaut 7,2 px : 20 + 7,2 = 27,2 px, sous le minimum, donc 28 px (1,75rem). Sur un écran de 1 440 px : 20 + 28,8 = 48,8 px, au-dessus du maximum, donc 48 px (3rem). Entre les deux, la taille grandit progressivement.

Les container queries

Une media query regarde la largeur de la fenêtre. Mais une même carte peut être affichée dans la colonne principale, large, ou dans la colonne latérale, étroite : c'est la largeur de son conteneur qui compte. Les container queries, reconnues par tous les navigateurs actuels depuis 2023, répondent à ce besoin :

.zone-cartes {
  container-type: inline-size;   /* ce conteneur peut être interrogé sur sa largeur */
}

.carte {
  display: grid;
  gap: 0.5rem;
}

@container (width >= 30rem) {
  .carte {
    grid-template-columns: 10rem 1fr;   /* image à gauche, texte à droite */
  }
}

La carte passe en deux colonnes dès que sa zone dépasse 30rem, où qu'elle soit placée dans la page. C'est l'outil idéal pour des composants réutilisables.

Images responsives : srcset, sizes et picture

Une photo de 1 600 px de large convient à un grand écran, mais un téléphone qui l'affiche sur 390 px télécharge quatre fois trop de pixels. L'attribut srcset propose plusieurs tailles du même fichier, et le navigateur choisit :

<img src="images/facade-800.jpg"
     srcset="images/facade-400.jpg 400w,
             images/facade-800.jpg 800w,
             images/facade-1200.jpg 1200w,
             images/facade-1600.jpg 1600w"
     sizes="(width >= 64rem) 50vw, 100vw"
     alt="Façade vitrée de la médiathèque, entrée de plain-pied"
     width="1600" height="1067">

• srcset liste les fichiers avec leur largeur réelle en pixels (400w = 400 pixels de large) ;
• sizes dit au navigateur quelle largeur l'image occupera dans la page : la moitié de la fenêtre (50vw) à partir de 64rem, toute la largeur sinon. Il en a besoin, parce qu'il choisit l'image avant d'avoir calculé la mise en page ;
• le navigateur multiplie cette largeur par la densité de l'écran (2 ou 3 pixels physiques par pixel CSS sur un téléphone récent) et prend en général le plus petit fichier suffisant ;
• src reste l'image de secours.

Sur un téléphone de 390 px de large à densité 3, l'image occupe 100vw = 390 px CSS, soit 1 170 pixels physiques : le navigateur prend facade-1200.jpg. Sur un ordinateur de 1 440 px de large à densité 1, elle occupe 720 px : il prend facade-800.jpg.

Pour servir un format moderne avec une solution de secours, ou une image recadrée différemment selon l'écran, on utilise <picture> :

<picture>
  <!-- Le navigateur prend la première source qu'il sait lire -->
  <source type="image/avif"
          srcset="images/facade-800.avif 800w, images/facade-1600.avif 1600w"
          sizes="(width >= 64rem) 50vw, 100vw">
  <source type="image/webp"
          srcset="images/facade-800.webp 800w, images/facade-1600.webp 1600w"
          sizes="(width >= 64rem) 50vw, 100vw">
  <img src="images/facade-800.jpg"
       srcset="images/facade-800.jpg 800w, images/facade-1600.jpg 1600w"
       sizes="(width >= 64rem) 50vw, 100vw"
       alt="Façade vitrée de la médiathèque, entrée de plain-pied"
       width="1600" height="1067">
</picture>

<!-- Direction artistique : un cadrage serré sur mobile, large sur grand écran -->
<picture>
  <source media="(width >= 48rem)" srcset="images/salle-large.webp">
  <img src="images/salle-serree.webp" alt="La salle de lecture jeunesse" width="800" height="800">
</picture>

Le <img> à l'intérieur de <picture> est obligatoire : c'est lui qui s'affiche, qui porte le alt, les dimensions et le chargement ; les <source> ne font que proposer d'autres fichiers.

WebP, AVIF et chargement différé

Le poids des images est souvent la première cause de lenteur d'une page. Quatre réglages, à appliquer systématiquement :

1. Le bon format : WebP ou AVIF pour les photos, nettement plus légers que JPEG à qualité visuelle égale, et reconnus par tous les navigateurs actuels ; SVG pour les logos et icônes. Les outils comme Squoosh (en ligne) ou la commande cwebp convertissent les images.
2. La bonne taille : jamais une image plus large que deux fois sa taille d'affichage maximale.
3. Les dimensions width et height dans le HTML, avec height: auto en CSS : le navigateur réserve la place, la page ne saute pas pendant le chargement.
4. Le chargement différé des images situées plus bas dans la page, avec loading="lazy" : elles ne sont téléchargées que quand l'utilisateur fait défiler jusqu'à elles.

<!-- Image principale, visible dès l'arrivée : chargée en priorité -->
<img src="images/hero.webp" alt="…" width="1600" height="900" fetchpriority="high">

<!-- Images plus bas dans la page : chargées à la demande -->
<img src="images/atelier-1.webp" alt="…" width="800" height="600" loading="lazy">

Les Core Web Vitals

Google mesure l'expérience réelle des visiteurs de Chrome avec trois indicateurs, les Core Web Vitals (signaux web essentiels). Ils font partie des nombreux signaux de son classement, et surtout ils mesurent ce que ressentent tes utilisateurs.

Entre les deux seuils, la note est « à améliorer ». Google regarde le 75e centile des visites réelles : il faut que 75 % des visites soient « bonnes » pour que la page le soit. L'INP a remplacé en mars 2024 l'ancien indicateur FID, que tu trouveras encore dans d'anciens cours.

Pour mesurer : Lighthouse (onglet des outils de développement de Chrome et Edge) donne une mesure en laboratoire, sur ta machine ; PageSpeed Insights (pagespeed.web.dev) ajoute les données réelles des visiteurs quand le site en a assez ; la Search Console les suit pour tout un site (chapitre 13).

Tester le responsive

• Le mode responsive des outils de développement (Ctrl+Maj+M) simule des tailles d'écran et des densités ; il ne remplace pas un essai sur un vrai téléphone, pour le tactile et la lisibilité.
• Rétrécis la fenêtre à 320 px de large : le contenu doit rester lisible sans défilement horizontal (critère WCAG 1.4.10, « redistribution »). Un défilement horizontal trahit presque toujours une largeur fixe, une image sans max-width, ou un long mot qui ne se coupe pas.
• Zoome à 200 % (Ctrl et +) : tout doit rester lisible et utilisable, sans texte coupé ni chevauchement.
• Vérifie les cibles tactiles : un lien ou un bouton trop petit, ou trop collé à son voisin, est difficile à toucher.

Exercices

.ateliers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1023px) {
  .ateliers { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px) {
  .ateliers { grid-template-columns: 1fr; }
}

.ateliers {
  display: grid;
  grid-template-columns: 1fr;
}

@media (width >= 40rem) {      /* 640 px */
  .ateliers { grid-template-columns: repeat(2, 1fr); }
}

@media (width >= 64rem) {      /* 1 024 px */
  .ateliers { grid-template-columns: repeat(3, 1fr); }
}

<img src="img/atelier-800.webp"
     srcset="img/atelier-480.webp 480w, img/atelier-800.webp 800w,
             img/atelier-1200.webp 1200w, img/atelier-1800.webp 1800w"
     sizes="(width >= 60rem) 33vw, 100vw" alt="…" width="1800" height="1200">