Leçon 12 / 12
Leçon 12 · ~25 min · Partie 3 — Mise en page

Responsive design

Le problème que le responsive résout

Tu crées ta page sur grand écran. Elle est parfaite. Trois colonnes, menu horizontal, textes bien espacés. Quelqu'un l'ouvre sur son téléphone — c'est le chaos. Les colonnes débordent, le texte est minuscule, les boutons impossibles à toucher.

Le responsive design, c'est créer une page qui s'adapte automatiquement à tous les écrans.

🖥️
Ordi ~1280px
📱
Tablette ~768px
📱
Mobile ~375px

En 2026, plus de 60% du trafic web vient des mobiles. Un site non responsive perd plus de la moitié de ses visiteurs. Le responsive n'est plus optionnel — c'est la norme.

Étape 1 obligatoire : la balise meta viewport

Avant toute media query, il faut ajouter une balise dans ton <head>.

Sans elle, les mobiles affichent ta page comme si elle faisait 980px de large, puis la rétrécissent. Tout devient minuscule. Avec elle, l'appareil utilise sa vraie largeur d'écran.

HTML — à coller dans tous tes <head> 
<head>
  <meta charset="UTF-8">
  <!-- width=device-width = utilise la vraie largeur de l'écran -->
  <!-- initial-scale=1.0 = pas de zoom initial -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mon site responsive</title>
</head>
⚠️

Attention ! Sans la balise meta viewport, les media queries ne marchent pas sur mobile. C'est la première chose à vérifier si quelque chose cloche.

Les media queries : CSS conditionnel

Une media query, c'est une condition CSS. "Si l'écran fait au moins 768px, applique ce style."

Tu peux adapter n'importe quelle propriété selon la taille de l'écran.

CSS 
/* Ce style s'applique TOUJOURS (toutes les tailles) */
body {
  font-size: 16px;
  padding: 1rem;
}

/* Ce style ne s'applique QUE si l'écran fait au moins 768px */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 2rem;
  }
}

/* Ce style ne s'applique QUE si l'écran fait au moins 1100px */
@media (min-width: 1100px) {
  body {
    max-width: 1100px;
    margin: 0 auto;  /* centrer le contenu sur les grands écrans */
  }
}

La syntaxe :

  • @media — mot-clé qui démarre la media query.
  • (min-width: 768px) — condition : "écran d'au moins 768px de large".
  • { ... } — les styles à appliquer si la condition est vraie.

Mobile First : commencer par le petit

Il y a deux façons d'écrire du responsive. Partir du desktop et adapter pour mobile. Ou partir du mobile et agrandir pour desktop.

La bonne approche s'appelle Mobile First : on écrit d'abord pour petit écran, puis on ajoute des media queries pour les grands écrans.

Pourquoi Mobile First ?

  • Mobile = une colonne. C'est plus simple. Commencer simple, c'est plus facile.
  • Si les media queries ne chargent pas, la page reste lisible sur mobile.
  • C'est l'approche recommandée par Google.
CSS — approche Mobile First 
/* Style de base = mobile (moins de 640px) */
.cartes {
  display: flex;
  flex-direction: column;  /* 1 colonne sur mobile */
  gap: 1rem;
}

/* On AGRANDIT pour tablette (640px et plus) */
@media (min-width: 640px) {
  .cartes {
    flex-direction: row;    /* 2 colonnes sur tablette */
    flex-wrap: wrap;
  }
}

/* On AGRANDIT encore pour desktop (1024px et plus) */
@media (min-width: 1024px) {
  .cartes {
    flex-wrap: nowrap;  /* 3 colonnes sur desktop */
  }
}
✅

Mobile First : CSS par défaut = mobile. Media queries avec min-width = on agrandit. Plus simple que de tout faire pour desktop et d'essayer de "réparer" pour mobile.

Les breakpoints courants

Un "breakpoint" (point de rupture), c'est la largeur où ton design change. Pas de valeurs obligatoires, mais voici les plus utilisées :

CSS — breakpoints courants 
/* Styles de base : mobile — aucune media query nécessaire */
/* Téléphones < 640px */

/* Petites tablettes et grands téléphones */
@media (min-width: 640px)  { /* ... */ }

/* Tablettes en mode paysage, petits laptops */
@media (min-width: 768px)  { /* ... */ }

/* Ordinateurs de bureau */
@media (min-width: 1024px) { /* ... */ }

/* Grands écrans */
@media (min-width: 1280px) { /* ... */ }

Bonnes pratiques responsive

Au-delà des media queries, quelques règles CSS à toujours appliquer pour que ton site soit naturellement adapté à tous les écrans.

CSS — règles responsive de base 
/* 1. Images qui s'adaptent automatiquement — TOUJOURS */
img {
  max-width: 100%;   /* jamais plus large que son conteneur */
  height: auto;      /* hauteur proportionnelle */
}

/* 2. Conteneur centré avec largeur max — pattern très courant */
.container {
  max-width: 1100px;    /* pas plus large que ça */
  margin: 0 auto;       /* centré */
  padding: 0 1.5rem;    /* espace sur les côtés (évite que le texte touche le bord) */
}

/* 3. Taille de titre fluide — s'adapte sans media query */
h1 {
  /* clamp(min, idéal, max) */
  /* min 1.8rem, idéal 4% de la largeur écran, max 3rem */
  font-size: clamp(1.8rem, 4vw, 3rem);
}

/* 4. Ne jamais fixer une largeur en pixels sur le body */
/* MAL : body { width: 1000px; }  */
/* BIEN : body { max-width: 1000px; margin: 0 auto; } */

Focus sur clamp() : une fonction CSS moderne. Elle prend 3 valeurs : minimum, idéale, maximum. clamp(1.8rem, 4vw, 3rem) donne une taille qui :

  • N'est jamais sous 1.8rem (petit écran).
  • Essaie de faire 4vw (4% de la largeur d'écran).
  • N'est jamais au-dessus de 3rem (grand écran).

Comment tester le responsive ?

Pas besoin de téléphone. Les navigateurs ont des outils intégrés.

  1. Ouvre ta page dans Chrome ou Firefox.
  2. Clic droit sur la page → "Inspecter".
  3. Clique sur l'icône téléphone en haut à gauche des outils développeur (ou Ctrl+Shift+M).
  4. Choisis une taille d'écran ou fais glisser pour redimensionner.
💡

Tu peux simuler des appareils spécifiques : iPhone, Galaxy, iPad… Et entrer une largeur exacte manuellement. Outil indispensable pour le responsive.

// à toi de jouer

Rends cette page responsive

Les 3 cartes sont côte à côte sur grand écran. Ajoute une media query pour les empiler en colonne sur mobile (en dessous de 600px). Essaie de rétrécir la fenêtre de prévisualisation pour voir le changement.

Éditeur live
HTML
CSS
Résultat
🎉

Félicitations ! 12 leçons terminées. Tu as maintenant les bases pour créer ta première page web. HTML, CSS, Flexbox, responsive — tous les outils sont là. La suite : pratique. Crée des projets, copie des designs, expérimente. C'est comme ça qu'on apprend vraiment.

// à retenir
  • Toujours inclure <meta name="viewport" content="width=device-width, initial-scale=1.0"> dans le head.
  • Approche Mobile First : styles par défaut pour mobile, media queries avec min-width pour agrandir.
  • @media (min-width: 768px) { } = styles appliqués à partir de 768px.
  • Breakpoints courants : 640px, 768px, 1024px, 1280px.
  • img { max-width: 100%; height: auto; } — toujours. Les images s'adaptent.
  • max-width + margin: 0 auto = conteneur centré et limité en largeur.
  • clamp(min, idéal, max) pour des tailles fluides sans media query.
  • Tester : Chrome → Inspecter → icône téléphone (Ctrl+Shift+M).