Responsive design : media queries et variables CSS

Votre médiathèque a fière allure sur votre écran d’ordinateur. Mais la majorité de vos visiteurs arriveront sur un téléphone, et là, les colonnes se tassent, le texte minuscule oblige à zoomer, la barre de navigation déborde. Un site moderne doit être responsive : s’adapter avec élégance à toutes les tailles d’écran, du mobile au grand moniteur. Dans cette dernière leçon, vous allez rendre la Médiathèque Horizon impeccable partout grâce aux media queries, aux unités fluides, et vous découvrirez les variables CSS — un outil qui transformera votre façon d’écrire des feuilles de style et vous offrira, en prime, un thème clair/sombre quasi gratuit.

🎯 Ce que vous allez apprendre

• Adopter l’approche mobile-first et écrire des media queries efficaces.
• Choisir les bonnes unités relatives (rem, em, %, vw) pour une mise à l’échelle fluide.
• Créer une typographie et des espacements vraiment fluides avec clamp().
• Rendre les images et la grille adaptatives sans casser la mise en page.
• Définir et utiliser des variables CSS, puis bâtir un thème clair/sombre avec prefers-color-scheme.

🛠️ Ce que vous allez construire

La version finale, responsive et thémable, de la médiathèque : une mise en page qui empile ses colonnes sur mobile et les déploie sur grand écran, une typographie qui grandit en douceur avec la taille de l’écran, des images qui ne débordent jamais, et un système de couleurs centralisé dans des variables, avec bascule automatique en thème sombre selon les préférences du visiteur. Le projet fil rouge atteint ici son aboutissement.

Prérequis

• La page de la médiathèque avec sa grille et sa barre de navigation (leçons précédentes).
• Être à l’aise avec les sélecteurs, le modèle de boîte, Flexbox et Grid.
• ⏱️ Temps estimé : environ 55 minutes.

Étape 1 — La philosophie mobile-first

Avant la technique, l’état d’esprit. L’approche mobile-first consiste à écrire d’abord les styles pour le plus petit écran — le mobile — puis à ajouter des adaptations pour les écrans plus larges. Pourquoi commencer par le mobile ? Parce qu’un téléphone impose la simplicité : une seule colonne, l’essentiel. Partir de là et enrichir vers le grand écran donne un code plus propre que l’inverse, où l’on passe son temps à « défaire » une mise en page complexe pour la faire tenir sur petit écran.

Concrètement, vos styles de base (hors media query) visent le mobile. Puis on utilise des media queries en min-width pour dire : « à partir de telle largeur, applique ces ajustements ». La balise <meta name="viewport"> posée dès la première leçon est le prérequis indispensable : sans elle, le mobile ferait semblant d’être un grand écran et tout votre travail responsive serait ignoré.

Étape 2 — Les media queries

Une media query applique un bloc de CSS uniquement quand une condition sur l’écran est vraie. La condition la plus courante porte sur la largeur de la fenêtre (width). En mobile-first, on utilise min-width : la règle s’active à partir d’une certaine largeur.

/* Style de base : mobile, une seule colonne */
.page {
  display: grid;
  grid-template-areas:
    "entete"
    "principal"
    "aside"
    "pied";
}

/* À partir de 768px : deux colonnes */
@media (min-width: 768px) {
  .page {
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
      "entete entete"
      "principal aside"
      "pied pied";
  }
}

Voyez la logique : par défaut, tout s’empile verticalement (idéal sur mobile) ; à partir de 768 px de large, on redessine les zones nommées pour placer le contenu et la colonne d’infos côte à côte. Un même balisage HTML, deux mises en page selon l’écran, sans la moindre duplication de contenu. Rechargez et étirez la fenêtre en passant la barre des 768 px : la disposition bascule d’un coup. Ces seuils s’appellent des points de rupture (breakpoints) ; on les place là où la mise en page commence à mal vieillir, pas sur les dimensions d’un téléphone particulier.

✅ Point d’étape — En réduisant la fenêtre, la mise en page passe de deux colonnes à une seule colonne empilée. Utilisez le mode « responsive » des outils de développement (F12, icône mobile) pour simuler différents appareils sans changer de matériel.

Étape 3 — Les unités relatives, fondations du fluide

Le responsive ne se résume pas aux points de rupture ; il commence par le choix des unités. Une taille fixée en pixels ne s’adapte à rien. Les unités relatives, elles, se recalculent selon le contexte :

• rem — relatif à la taille de police racine (par défaut 16 px). 1.5rem = 24 px. Idéal pour les tailles de texte et les espacements, car il respecte les préférences d’accessibilité de l’utilisateur.
• em — relatif à la taille de police de l’élément parent. Utile pour des composants qui s’auto-dimensionnent.
• % — relatif à une dimension du parent. Parfait pour des largeurs souples.
• vw / vh — 1 % de la largeur / hauteur de la fenêtre. Pour des éléments liés à la taille de l’écran.

La bonne habitude : réserver les pixels aux détails fins (une bordure de 1 px), et piloter texte et espacements en rem. Ainsi, si un visiteur augmente la taille de police de son navigateur pour mieux lire, toute votre mise en page s’agrandit harmonieusement — un point d’accessibilité que les valeurs en pixels rigides cassent net.

Étape 4 — La typographie fluide avec clamp()

Les media queries font basculer le style par paliers. Mais on peut faire mieux pour le texte : le faire grandir en continu avec l’écran. La fonction clamp() prend trois valeurs — un minimum, une valeur idéale, un maximum — et garde le résultat borné entre les deux extrêmes.

h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

Cette ligne se lit ainsi : « la taille du titre vaut 4 % de la largeur de la fenêtre, mais jamais moins de 1,5 rem ni plus de 3 rem ». Sur un petit mobile, le titre reste à 1,5 rem (lisible) ; sur un grand écran, il plafonne à 3 rem (pas démesuré) ; entre les deux, il grandit en douceur, pixel par pixel, sans aucun point de rupture. C’est l’élégance du responsive moderne : une seule déclaration remplace trois media queries. Appliquez clamp() à vos titres et constatez la fluidité en redimensionnant.

Étape 5 — Images et médias adaptatifs

Une image insérée à sa taille naturelle déborde fatalement sur un écran plus étroit qu’elle. La parade tient en une règle universelle, à poser dès le début de tout projet :

img {
  max-width: 100%;
  height: auto;
}

max-width: 100% empêche l’image de dépasser la largeur de son conteneur ; height: auto préserve ses proportions en recalculant la hauteur. Résultat : vos couvertures d’ouvrages se réduisent proprement sur mobile sans jamais provoquer de défilement horizontal — le défaut le plus visible d’un site mal conçu. Pour aller plus loin, l’attribut HTML srcset permet même de servir une image plus légère aux petits écrans, économisant des données précieuses ; mais la règle ci-dessus suffit déjà à régler 90 % des cas.

Étape 6 — Les variables CSS : centraliser pour mieux régner

Voici l’outil qui va changer votre façon d’écrire du CSS. Les propriétés personnalisées, communément appelées variables CSS, permettent de stocker une valeur sous un nom et de la réutiliser partout. On les déclare avec un double tiret --, généralement sur le sélecteur :root (la racine du document) pour qu’elles soient disponibles globalement, et on les lit avec la fonction var().

:root {
  --couleur-principale: #1d3557;
  --couleur-accent: #e63946;
  --espacement: 16px;
  --rayon: 8px;
}

.carte {
  border-radius: var(--rayon);
  padding: var(--espacement);
}

nav a:hover {
  color: var(--couleur-accent);
}

L’intérêt saute aux yeux : la couleur principale de la médiathèque n’est définie qu’à un seul endroit. Pour changer toute l’identité visuelle du site, vous modifiez une ligne dans :root au lieu de chasser la couleur dans des dizaines de règles. La fonction var() accepte même une valeur de repli : var(--rayon, 4px) utilisera 4 px si la variable n’est pas définie. Contrairement aux variables des préprocesseurs, les variables CSS sont vivantes : elles existent dans le navigateur, héritent comme les autres propriétés et peuvent changer à la volée — ce qui ouvre la porte au thème sombre.

✅ Point d’étape — Toutes les couleurs et espacements de la médiathèque passent par des variables. Changez --couleur-principale dans :root et observez tout le site se mettre à jour instantanément. C’est la preuve qu’un seul point de vérité gouverne désormais votre style.

Étape 7 — Le thème sombre, presque gratuit

Puisque les variables CSS sont vivantes, on peut redéfinir leurs valeurs dans certaines conditions. La media query prefers-color-scheme détecte si le visiteur a choisi un thème sombre au niveau de son système d’exploitation. En y redéfinissant les variables, tout le site bascule d’un coup, sans toucher à une seule règle de composant.

:root {
  --fond: #ffffff;
  --texte: #1d3557;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #14213d;
    --texte: #e5e5e5;
  }
}

body {
  background: var(--fond);
  color: var(--texte);
}

C’est tout. Les composants utilisent var(--fond) et var(--texte) sans savoir s’ils sont clairs ou sombres ; seules les valeurs des variables changent selon la préférence système. Un utilisateur en mode sombre verra automatiquement une médiathèque sombre, reposante pour les yeux la nuit. Voilà la puissance de la centralisation : une fonctionnalité qui demanderait des heures avec des couleurs en dur s’obtient en quelques lignes. Pensez toujours à vérifier que le contraste entre texte et fond reste suffisant dans les deux thèmes — c’est une exigence d’accessibilité.

✅ Point d’étape — Activez le thème sombre de votre système : la médiathèque doit adopter des couleurs sombres sans rechargement. Si rien ne change, vérifiez que body utilise bien var(--fond) et non une couleur écrite en dur.

Et après ? Un aperçu du CSS moderne

Vous tenez désormais des fondations complètes. Le CSS continue d’évoluer, et quelques fonctionnalités récentes, aujourd’hui prises en charge par tous les navigateurs modernes, méritent d’être citées comme prochaines étapes : les requêtes de conteneur (container queries), qui adaptent un composant selon la largeur de son parent plutôt que de l’écran ; le sélecteur :has(), qui cible un élément d’après son contenu ; et l’imbrication native (nesting), qui permet d’écrire des règles imbriquées sans préprocesseur. Inutile de les apprendre tout de suite : maîtrisez d’abord les bases de ce parcours, elles couvrent l’écrasante majorité des besoins réels.

🐞 Pièges fréquents

✅ Récapitulatif

Vous bouclez le parcours en beauté. Vous savez penser mobile-first, écrire des media queries en min-width, choisir des unités relatives (rem, %, vw) plutôt que des pixels rigides, fluidifier la typographie avec clamp(), empêcher les images de déborder, et surtout centraliser votre style dans des variables CSS — jusqu’à offrir un thème sombre automatique avec prefers-color-scheme. La Médiathèque Horizon est désormais un site complet, sémantique, accessible, mis en page avec Flexbox et Grid, et impeccable sur tous les écrans. Vous êtes passé d’une page blanche à un site web entier, brique après brique. Les fondations que vous tenez là sont exactement celles sur lesquelles reposent tous les sites du web — y compris les plus ambitieux.

🧾 Aide-mémoire

💪 À vous de jouer

Ajoutez un point de rupture intermédiaire : sur les écrans d’au moins 1200 px, donnez à la zone principale trois fois la largeur de la colonne d’infos (au lieu de deux), et augmentez l’espacement global via la variable --espacement. Indice : on peut redéfinir une variable à l’intérieur d’une media query.

@media (min-width: 1200px) {
  :root {
    --espacement: 24px;
  }
  .page {
    grid-template-columns: 3fr 1fr;
  }
}

Tutoriels frères

• Maîtriser CSS Grid pour vos mises en page — la mise en page que l’on rend ici responsive.
• Maîtriser Flexbox pour vos mises en page — l’alignement à une dimension, lui aussi adaptatif.

Pour aller plus loin

• 🔝 Retour au parcours : Apprendre HTML & CSS de zéro
• MDN — Utiliser les media queries
• MDN — Utiliser les propriétés personnalisées

FAQ

Quels points de rupture choisir ?
Il n’existe pas de valeurs sacrées. La bonne pratique consiste à partir du contenu : élargissez progressivement la fenêtre et ajoutez un point de rupture là où la mise en page commence à mal s’afficher. Des seuils autour de 600, 768 et 1200 px sont courants car ils correspondent grossièrement à mobile, tablette et bureau, mais ce sont des repères, pas des obligations.

Variables CSS ou variables d’un préprocesseur (Sass) ?
Les variables CSS natives vivent dans le navigateur : elles héritent, se redéfinissent dans une media query et changent à l’exécution (d’où le thème sombre facile). Les variables de préprocesseur sont résolues avant l’envoi au navigateur et ne peuvent pas changer dynamiquement. Pour le thème et le responsive, les variables CSS natives sont supérieures.

em ou rem pour le texte ?
Privilégiez rem pour les tailles de texte : il dépend uniquement de la racine, ce qui évite les effets de cascade où un em se multiplie par celui du parent et produit des tailles imprévisibles. Gardez em pour des cas précis où vous voulez justement qu’un composant s’échelonne par rapport à sa propre police.

Faut-il prévoir un thème sombre manuel en plus de prefers-color-scheme ?
Pour aller plus loin, oui : on ajoute souvent un bouton qui force le thème indépendamment du système, en plaçant une classe sur l’élément racine et en redéfinissant les variables sous cette classe. La media query prefers-color-scheme reste la base automatique et suffit pour un premier site.