Responsive design : media queries et méthode mobile-first (Partie 15)

Un site web moderne doit être agréable sur mobile, tablette et ordinateur. Le responsive design n’est pas un bonus : c’est une exigence.

L’idée est simple : votre layout doit s’adapter à la largeur de l’écran, sans casser la lisibilité, sans déborder, et sans forcer l’utilisateur à zoomer.

Dans cette partie, vous allez apprendre :

la base technique indispensable (viewport)
les unités “fluides”
les media queries
l’approche mobile-first (la méthode la plus propre)

👉 Mobile-first = on commence simple (mobile), puis on ajoute des améliorations pour les grands écrans.

1) La balise viewport : obligatoire en responsive

Sans viewport, le navigateur mobile “simule” un écran plus large, ce qui casse le rendu. Ajoutez toujours cette ligne dans le <head>.

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

Lecture humaine :

width=device-width : la page suit la largeur de l’écran
initial-scale=1.0 : pas de zoom par défaut

2) Utiliser des unités fluides (la base du responsive)

Les unités fixes (ex: 1000px) cassent souvent sur mobile. On préfère des unités qui s’adaptent.

max-width + margin auto

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

Résultat : le contenu est centré sur desktop, mais reste confortable sur mobile grâce au padding.

Images responsives

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

Résultat : l’image ne déborde jamais.

3) Breakpoints : à quel moment on change le design ?

Un breakpoint est une largeur d’écran à partir de laquelle vous ajustez le layout.

Il n’existe pas une liste unique “parfaite”, mais voici une base courante :

≤ 480px : petits smartphones
≤ 768px : smartphones / petites tablettes
≤ 1024px : tablettes / petits laptops
≥ 1200px : grands écrans

👉 Bon réflexe : choisissez vos breakpoints selon votre design, pas selon un tableau “magique”.

4) Media queries : changer le CSS selon la largeur

Une media query est une condition : “si l’écran fait telle largeur, applique ces règles”.

Exemple simple (adapter une grille) :

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .cards {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Lecture humaine :

mobile : 1 colonne
tablette : 2 colonnes
desktop : 3 colonnes

5) Approche mobile-first : la méthode recommandée

Mobile-first signifie :

on écrit d’abord le CSS pour mobile (écran petit)
ensuite on ajoute des améliorations pour les grands écrans avec min-width

Exemple : un menu qui change selon la taille.

<header class="topbar">
  <div class="brand">MonSite</div>
  <button class="burger">☰</button>

  <nav class="nav">
    <a href="#">Accueil</a>
    <a href="#">Blog</a>
    <a href="#">Contact</a>
  </nav>
</header>

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.nav {
  display: none; /* mobile : caché */
  gap: 14px;
}

.burger {
  display: inline-block; /* mobile : visible */
}

/* À partir de 900px : on passe en version desktop */
@media (min-width: 900px) {
  .nav {
    display: flex;
  }
  .burger {
    display: none;
  }
}

✅ Mobile-first = un site léger, clair et efficace sur petit écran.

6) Responsive typographie et espacements (simple et efficace)

Sur mobile, il faut souvent réduire les tailles et augmenter la lisibilité. Sur desktop, on peut respirer davantage.

h1 {
  font-size: 1.6rem;
  line-height: 1.2;
}

@media (min-width: 768px) {
  h1 {
    font-size: 2.2rem;
  }
}

Même logique pour les paddings :

.section {
  padding: 18px;
}

@media (min-width: 1024px) {
  .section {
    padding: 40px;
  }
}

7) Erreurs fréquentes en responsive design

oublier la balise viewport
utiliser des largeurs fixes partout
choisir trop de breakpoints
designer desktop d’abord puis “casser” pour mobile
ne pas tester sur plusieurs tailles

👉 Testez souvent : responsive = itération, pas magie.

8) Mini checklist responsive (à appliquer sur chaque page)

Viewport OK
Images responsives (max-width:100%)
Container avec max-width + padding
Textes lisibles (16px minimum)
Aucun débordement horizontal
Breakpoints utiles (pas trop)

Vous savez maintenant construire des pages responsives : comprendre la logique des breakpoints, écrire des media queries et appliquer l’approche mobile-first.

Dans la Partie 16, nous allons créer un mini projet complet (page “landing” responsive) pour réunir tout ce que vous avez appris.

✅ Responsive design = expérience cohérente sur tous les écrans.