← Sommaire TSRS 1 · Jour 3 · Mercredi
Cours · Jour 3

Le Cœur du RWD : Media Queries & Typo fluide

Rendre une page vraiment adaptable : conditions selon l'écran, masquage et typographie qui respire.

Le problème que ça résout

Grid et Flexbox savent répartir des éléments, mais ils ne savent pas changer de comportement selon la taille de l'écran. Or une mise en page à deux colonnes parfaite sur ordinateur peut devenir illisible sur un smartphone de 360px de large.

Le Responsive Web Design (RWD) répond à ça avec trois outils clés : les media queries, la fonction clamp(), et le masquage sélectif via display: none.

Dans le TP Le portail captif affiche 2 colonnes sur PC, mais masque l'illustration et ne garde que le formulaire sur mobile.

Les Media Queries (@media)

Une media query, c'est un bloc de CSS qui ne s'applique que si une condition est vraie — le plus souvent une largeur d'écran maximale ou minimale.

/* styles normaux (desktop d'abord) */
.portal { grid-template-columns: 1fr 1fr; }

/* SI l'écran fait 800px de large ou moins : */
@media (max-width: 800px) {
  .portal { grid-template-columns: 1fr; }
}

Le vocabulaire

@mediaOuvre une condition d'application du style.
max-width: 800px« si la largeur est ≤ 800px » — cible tablettes et mobiles.
min-width: 800px« si la largeur est ≥ 800px » — cible les grands écrans.

Le point où le design change s'appelle un breakpoint (point de rupture). On en met autant que nécessaire.

Bonne pratique Concevoir « mobile-first » (styles de base pour mobile, puis min-width pour agrandir) est souvent recommandé, mais l'approche inverse (max-width) est tout aussi valable et plus intuitive au début.

Le masquage sélectif (display: none)

display: none retire complètement un élément : il n'est plus affiché et ne prend plus aucune place. À l'intérieur d'une media query, ça permet de cacher ce qui n'a pas de sens sur petit écran.

@media (max-width: 800px) {
  /* on masque l'illustration sur mobile */
  .illus { display: none; }
}
À ne pas confondre display: none supprime l'élément de la page. visibility: hidden, lui, le cache mais garde sa place vide — ce n'est pas ce qu'on veut ici.

Dans le TP, ça économise la bande passante mobile : l'utilisateur qui capte mal ne charge que le formulaire.

La typographie fluide (clamp())

Sans clamp(), on est obligé de changer la taille du texte par paliers dans chaque media query. clamp() fait varier la taille en continu, en douceur, selon la largeur de l'écran.

h1 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
}

Les trois valeurs

  • 1.6rem → la taille minimale (le texte ne descendra jamais en dessous).
  • 4vw → la taille idéale, qui s'adapte (4% de la largeur de l'écran).
  • 2.2rem → la taille maximale (le texte ne dépassera jamais au-dessus).

Résultat : sur un petit écran le titre reste lisible, sur un grand il grandit, mais jamais de façon excessive — et sans le moindre saut brutal.

Rappel unités rem = taille relative à la racine (stable). vw = 1% de la largeur de la fenêtre (fluide). em = relative à l'élément parent.

L'ergonomie tactile

Sur mobile, on clique avec le pouce, pas avec un curseur précis. Deux règles d'or issues du cahier des charges :

1. Zone de contact ≥ 44px

Tout élément cliquable (champ, bouton) doit faire au moins 44px de haut. C'est la norme d'accessibilité pour être activable facilement au doigt.

Trop petit ✗
Confortable ✓
.field input, button {
  min-height: 44px;
}

2. Police des champs ≥ 16px

Si un <input> a une police inférieure à 16px, iOS Safari zoome automatiquement quand on tape dedans — très désagréable. Mettre font-size: 16px l'empêche.

.field input {
  font-size: 16px;  /* évite le zoom auto iOS */
}

Checklist avant de rendre

  • La page a 2 colonnes sur desktop, 1 seule sur mobile.
  • L'illustration est masquée en display: none sous le breakpoint mobile.
  • Les champs et le bouton font au moins 44px de haut.
  • La police des inputs est à 16px (anti-zoom iOS).
  • Le titre et les consignes utilisent clamp().
  • Testé en mode responsive (F12 → Ctrl+Shift+M) à 768px puis 375px.
  • Pas de scroll horizontal parasite sur mobile.