CSS — Responsive design (mobile first)
Media queries, breakpoints, clamp() et menu hamburger
Concepts Théoriques
En 2026, plus de 60% du trafic web vient des smartphones. En Afrique de l'Ouest, ce chiffre dépasse 75%. Un site qui ne fonctionne pas sur mobile perd la majorité de ses visiteurs. Le responsive design fait qu'un même site s'adapte à toutes les tailles d'écran.
L'approche Mobile First
Il existe deux approches :
- Desktop First : concevoir pour grand écran, puis adapter pour mobile en enlevant des choses. Plus difficile.
- Mobile First : concevoir pour mobile (le minimum), puis ajouter des styles pour les écrans plus grands. Recommandé.
En Mobile First, votre CSS de base est le style mobile. Les media queries ajoutent de la complexité pour les écrans plus larges.
Le viewport meta tag
La ligne suivante dans votre <head> est absolument obligatoire :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Sans elle, le mobile affiche la version desktop en miniature. Avec elle, le navigateur utilise sa vraie largeur et votre CSS responsive fonctionne.
Les media queries
Les media queries appliquent des styles CSS quand certaines conditions sont remplies :
@media (min-width: 768px) { /* styles pour tablette et plus */ }
min-width signifie "à partir de cette largeur". C'est l'approche Mobile First : on ajoute de la complexité quand l'écran est assez large.
Les breakpoints standards
- Mobile : < 768px — style de base, pas de media query
- Tablette : 768px et plus — @media (min-width: 768px)
- Desktop : 1024px et plus — @media (min-width: 1024px)
- Large : 1440px et plus — @media (min-width: 1440px)
Pour la plupart des sites, 2 breakpoints suffisent : 768px et 1024px.
La typographie responsive avec clamp()
Au lieu d'écrire 3 media queries pour changer la taille du titre :
font-size: clamp(2rem, 6vw, 4rem);
clamp(minimum, préféré, maximum) crée une transition fluide :
- Sur mobile : 2rem (32px)
- Sur desktop : 4rem (64px)
- Entre les deux : s'adapte fluidement avec 6vw
Les images responsives
Les images doivent s'adapter sans déborder :
img { max-width: 100%; height: auto; display: block; }
Pour servir des images de tailles différentes selon l'écran, utilisez la balise <picture> avec des <source> et des attributs media.
Le menu hamburger
Sur mobile, le menu horizontal ne rentre pas. La solution standard : un bouton hamburger (3 lignes) qui ouvre/ferme le menu. Le CSS contrôle la visibilité, le JavaScript gère le clic (chapitre 12).
Principe :
- Sur mobile : le menu <ul> est caché (display: none). Le bouton hamburger est visible.
- Sur tablette+ : le menu est visible (display: flex). Le bouton est caché.
- Quand on clique le hamburger, on ajoute une classe "active" au <ul> qui le rend visible.
> Attention : Testez TOUJOURS votre site en responsive. Dans Chrome DevTools (F12), cliquez sur l'icône smartphone en haut à gauche pour simuler différents appareils.