CSS · Leçon 6

Responsive design

Un même site doit être agréable sur téléphone, tablette et grand écran. Dans cette leçon, les aperçus ont un curseur de largeur : utilise-le pour simuler différents écrans.

Étape 0 : la balise viewport

Sans elle, les téléphones affichent la page comme sur un écran d'ordinateur… en tout petit. À mettre dans chaque head :

<meta name="viewport" content="width=device-width, initial-scale=1">
Tester sur ton ordinateur Ouvre les outils de développement (F12) puis le mode appareil (Ctrl+Maj+M) pour simuler un iPhone, une tablette…

Des tailles fluides

Premier réflexe : éviter les largeurs fixes en pixels. Réduis la largeur de l'aperçu :

Les media queries

Un bloc @media ne s'applique que si la condition est vraie. Fais glisser la largeur au-delà de 600px :

Mobile first ✅

On écrit d'abord le style mobile (simple), puis on ajoute des règles pour les grands écrans avec min-width.

Points de rupture

Pas de valeurs magiques : on en ajoute un quand le design « casse ». Souvent vers 600px et 900px.

Avec @media (min-width: 600px) { … }, les règles s'appliquent quand l'écran fait…

  1. moins de 600px
  2. 600px ou plus
  3. exactement 600px

min-width = « largeur minimale » : à partir de 600px. max-width ferait l'inverse.

Responsive… sans media query

Flexbox et Grid savent souvent s'adapter tout seuls. Et clamp(min, idéal, max) rend un texte fluide :

À toi de jouer

Les cartes responsive

  • Par défaut (mobile) : les cartes sont empilées sur 1 colonne.
  • À partir de 700px : 3 colonnes (utilise une media query).
  • Espacement de 12px dans les deux cas.
IndiceMobile first : écris d’abord la version mobile (1 colonne), sans media query. Teste avec le curseur de largeur.
Indice.cartes { display: grid; grid-template-columns: 1fr; gap: 12px; } puis une media query @media (min-width: 700px) { … }.
IndiceDans la media query, ne réécris que ce qui change :
@media (min-width: 700px) {
  .cartes {
    grid-template-columns: repeat(3, 1fr);
  }
}

Le menu qui s'adapte

  • Sur mobile : les liens du menu sont les uns sous les autres et la pub .pub est cachée.
  • À partir de 600px : les liens sont côte à côte et la pub est visible.
IndiceVersion mobile d’abord : liens les uns sous les autres → flex-direction: column sur .menu. Pub cachée → display: none.
IndicePuis une media query @media (min-width: 600px) { … } qui remet les liens en ligne et affiche la pub.
IndiceLa media query :
@media (min-width: 600px) {
  .menu { flex-direction: row; }
  .pub { display: block; }
}

À retenir