frontend / css

Responsive design : media queries

Leçon 101 exercice

Explication

Ce que vous allez apprendre

Écrire des media queries en approche mobile-first avec min-width
Adapter un style selon les préférences système avec prefers-color-scheme et hover
Différencier un appareil à pointeur précis (souris) d'un écran tactile avec hover/pointer
Produire une feuille de style dédiée à l'impression avec @media print
Choisir un point de rupture selon l'endroit où le design casse visuellement, pas selon une valeur magique

Dans quel contexte ?

Sur catalogue.html, une grille de produits en 4 colonnes fixes s'affiche totalement écrasée sur un smartphone en portrait, les images réduites à quelques pixels de large. En repartant d'un style mobile-first (grid-template-columns: 1fr par défaut) puis en ajoutant @media (min-width: 640px) et @media (min-width: 1024px) pour enrichir progressivement la grille à 2 puis 3 colonnes, chaque appareil reçoit une mise en page pensée pour lui, sans jamais partir d'un design desktop à "réparer" pour mobile.

Étape 1 : une page, des dizaines d'appareils

Un même site est aujourd'hui consulté sur un smartphone, une tablette, un ordinateur portable ou un grand moniteur externe. Impossible de créer une mise en page fixe qui convienne à tous ces contextes en même temps.

Étape 2 : la solution, des règles conditionnelles

Les media queries résolvent ce problème en permettant d'appliquer des règles CSS conditionnelles selon les caractéristiques de l'appareil — sa largeur en premier lieu, mais aussi son orientation ou ses préférences système.

Étape 3 : pourquoi commencer par le mobile

L'approche recommandée aujourd'hui consiste à écrire le style de base pour le PLUS PETIT écran, puis à ajouter progressivement de la complexité pour les écrans plus grands via min-width.

Étape 4 : pourquoi cet ordre, pas l'inverse

Cette logique peut sembler contre-intuitive au début, mais elle correspond à une réalité : un petit écran impose des contraintes fortes qui simplifient le design, alors qu'un grand écran offre plus d'espace pour ENRICHIR une mise en page déjà fonctionnelle. C'est plus simple d'ajouter que de retirer.

Étape 5 : au-delà de la taille, les préférences utilisateur

Les media queries ne se limitent pas aux dimensions. prefers-color-scheme détecte le mode sombre activé au niveau du système, et hover: hover distingue un appareil à pointeur précis d'un écran tactile.

Étape 6 : pourquoi cette distinction tactile compte

Sans elle, on risque de proposer des interactions "au survol" invisibles sur mobile, où il n'existe pas de véritable état de survol.

Media feature	Détecte	Cas d'usage typique
`min-width` / `max-width`	Largeur du viewport	Adapter la mise en page à l'écran
`prefers-color-scheme`	Mode sombre activé au niveau système	Basculer les couleurs sans bouton dédié
`hover: hover`	Pointeur précis (souris, trackpad)	Activer des effets au survol
`hover: none`	Écran tactile	Rendre les actions visibles en permanence

Prérequis

Cette leçon suppose une bonne aisance avec Flexbox et Grid, car les media queries s'utilisent presque toujours pour faire varier grid-template-columns ou flex-direction selon la largeur d'écran.

Le piège des breakpoints magiques

Il reste un dernier réflexe à corriger : beaucoup de développeurs recopient des valeurs de breakpoints (640px, 768px, 1024px) sans les questionner. Ce sont des repères usuels, pas des règles absolues — le bon point de rupture est celui où LE DESIGN LUI-MÊME commence à se casser visuellement.

Piège fréquent

Copier-coller des breakpoints standards (640px, 768px, 1024px) sans jamais tester son propre design mène parfois à des ruptures mal placées. Redimensionnez la fenêtre du navigateur progressivement et fixez le breakpoint exactement là où la mise en page commence à devenir inconfortable, pas avant.

Et ensuite ?

Une fois les media queries maîtrisées, la prochaine étape va plus loin : adapter un composant à la taille de son propre conteneur, pas seulement à celle de l'écran.

Commandes & code

Responsive design : media queries

Adapter la mise en page selon les caractéristiques de l'appareil d'affichage.

/* Approche mobile-first : le style de base cible le petit écran,
   les media queries AJOUTENT de la complexité pour les grands écrans */
.grille {
    display: grid;
    grid-template-columns: 1fr; /* 1 colonne par défaut, mobile */
}

@media (min-width: 640px) {
    .grille { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .grille { grid-template-columns: repeat(3, 1fr); }
}

/* Breakpoints usuels (à adapter au design réel, pas des valeurs magiques figées) */
/* 640px  -> tablette portrait / grand mobile */
/* 768px  -> tablette */
/* 1024px -> petit desktop / tablette paysage */
/* 1280px -> desktop */
/* 1536px -> grand écran */

/* Combinaison de conditions */
@media (min-width: 640px) and (max-width: 1023px) {
    .sidebar { display: none; } /* masqué uniquement sur tablette */
}

@media (orientation: landscape) {
    .hero { height: 60vh; }
}

@media (prefers-color-scheme: dark) {
    :root { --bg: #111; --fg: #eee; }
}

@media (hover: hover) and (pointer: fine) {
    /* souris/trackpad réel : activer les effets hover */
    .carte:hover { transform: translateY(-4px); }
}
@media (hover: none) {
    /* tactile : pas de hover fiable, prévoir un état visible autrement */
    .carte .actions { opacity: 1; }
}

/* Media queries pour l'impression */
@media print {
    nav, .cta, footer { display: none; }
    body { color: black; background: white; }
    a[href]::after { content: " (" attr(href) ")"; } /* affiche l'URL du lien sur papier */
}

/* Range syntax moderne (niveau 4), plus lisible que min/max-width */
@media (640px <= width < 1024px) {
    .sidebar { display: none; }
}

<!-- Media queries côté HTML : charger un CSS conditionnellement -->
<link rel="stylesheet" href="/css/print.css" media="print">
<link rel="stylesheet" href="/css/large.css" media="(min-width: 1024px)">

Résumé

Le mobile-first (min-width) donne un CSS plus court qu'un desktop-first (max-width).
prefers-color-scheme et hover/pointer adaptent le style aux capacités réelles de l'appareil.
@media print produit une version imprimable propre sans dupliquer le HTML.
La range syntax (640px <= width < 1024px) remplace avantageusement les combinaisons min-/max-width.

Exercices pratiques

1 disponible

Mission : un catalogue conçu desktop-first qui s'effondre en cascade

Objectif : Convertir un CSS desktop-first en mobile-first et choisir les bonnes media features pour un catalogue produit.

Contexte

Sur catalogue.css, le style de base fixe grid-template-columns: repeat(4, 1fr); directement sur .grille, puis une unique règle @media (max-width: 480px) { .grille { grid-template-columns: 1fr; } } tente de rattraper le mobile. Entre 481px et 1023px (tablette), la grille reste bloquée à 4 colonnes écrasées, illisibles. Par ailleurs, un bouton "Ajouter au panier" ne s'affiche qu'au survol de la carte produit (opacity: 0 par défaut, opacity: 1 au :hover), le rendant invisible sur tablette tactile.

Résoudre l’exercice →