Le responsive en CSS : media queries et bonnes pratiques
Un site responsive s’adapte à la taille de l’écran : lisible sur un téléphone, confortable sur un grand moniteur, sans que l’on ait à concevoir plusieurs versions. En CSS, cela repose sur quelques outils simples — les media queries, les unités relatives et, plus récemment, clamp() et les container queries. Ce guide couvre l’ensemble, avec une approche moderne : mobile-first, des breakpoints réfléchis, et le moins de code possible.
Le point de départ : la balise viewport
Avant même le CSS, une ligne de HTML est indispensable dans le <head>. Sans elle, les mobiles simulent un écran large et « dézooment » la page, ruinant tout le responsive.
<meta name="viewport" content="width=device-width, initial-scale=1" />
width=device-width indique au navigateur d’utiliser la largeur réelle de l’appareil comme référence. C’est le prérequis absolu.
L’approche mobile-first
Deux stratégies existent : partir du grand écran et rétrécir (desktop-first), ou partir du mobile et enrichir (mobile-first). La seconde est aujourd’hui la norme. On écrit d’abord les styles pour petit écran (les plus simples), puis on ajoute de la complexité pour les écrans plus grands avec min-width.
/* Styles de base : mobile (aucune media query) */
.grille {
display: grid;
grid-template-columns: 1fr; /* une seule colonne sur mobile */
gap: 16px;
}
/* À partir de 768px : deux colonnes */
@media (min-width: 768px) {
.grille {
grid-template-columns: 1fr 1fr;
}
}
/* À partir de 1024px : trois colonnes */
@media (min-width: 1024px) {
.grille {
grid-template-columns: repeat(3, 1fr);
}
}
L’intérêt du mobile-first : le CSS de base couvre le cas le plus contraint, et chaque media query ne fait qu’ajouter. Le code reste lisible et les surcharges sont rares.
Les media queries : min-width vs max-width
Une media query applique un bloc de CSS sous condition. Les deux plus utilisées portent sur la largeur du viewport :
/* min-width : s'applique à partir de cette largeur (mobile-first) */
@media (min-width: 768px) { /* ... */ }
/* max-width : s'applique jusqu'à cette largeur (desktop-first) */
@media (max-width: 767px) { /* ... */ }
Évitez de mélanger les deux logiques dans un même projet : on finit avec des chevauchements de 1px et des conflits. Choisissez min-width (mobile-first) et tenez-vous-y. On peut aussi combiner des conditions :
/* Uniquement entre 768px et 1023px (tablette) */
@media (min-width: 768px) and (max-width: 1023px) {
.barre-laterale { display: none; }
}
/* Selon l'orientation */
@media (orientation: landscape) { /* ... */ }
Choisir ses breakpoints
Un breakpoint est le seuil où la mise en page change. Erreur classique : caler ses breakpoints sur les dimensions de modèles de téléphones précis. Ces valeurs changent chaque année. La bonne méthode est de placer un breakpoint là où le design casse, pas là où un appareil existe.
Cela dit, un jeu de valeurs rondes couvre la majorité des cas :
/* Repères courants */
@media (min-width: 480px) { /* grands mobiles */ }
@media (min-width: 768px) { /* tablettes */ }
@media (min-width: 1024px) { /* petits écrans / laptops */ }
@media (min-width: 1280px) { /* grands écrans */ }
Le principe reste : redimensionnez lentement la fenêtre du navigateur, et ajoutez un breakpoint dès que quelque chose devient inconfortable.
Les unités relatives : la clé d’un responsive fluide
Les pixels fixes sont l’ennemi du responsive. Les unités relatives, elles, s’adaptent au contexte :
%: relatif à la taille de l’élément parent. Parfait pour les largeurs.rem: relatif à la taille de police racine (<html>, 16px par défaut). Idéal pour les tailles de texte et les espacements, car respecte les réglages d’accessibilité de l’utilisateur.em: relatif à la taille de police de l’élément courant.vw/vh: 1% de la largeur / hauteur du viewport. Utile pour des sections plein écran.
.conteneur {
width: 90%; /* fluide dans son parent */
max-width: 1200px; /* mais borné sur grand écran */
margin: 0 auto;
padding: 1.5rem; /* espacement lié à la taille de police */
}
h1 {
font-size: 2rem; /* s'adapte si l'utilisateur agrandit sa police */
}
Le duo width: 90% + max-width est un motif fondamental : le contenu occupe l’écran sur mobile tout en restant lisible (ligne pas trop longue) sur grand moniteur.
clamp() : la typographie fluide sans media query
clamp(min, valeur idéale, max) permet à une valeur de varier de façon fluide entre deux bornes, sans écrire une seule media query. C’est particulièrement puissant pour les tailles de police.
h1 {
/* jamais moins de 1.75rem, jamais plus de 3rem,
et proportionnel à la largeur d'écran entre les deux */
font-size: clamp(1.75rem, 1rem + 3vw, 3rem);
}
.section {
padding: clamp(1rem, 5vw, 4rem);
}
Le titre grandit progressivement avec l’écran, puis se stabilise aux bornes. Fini les trois media queries juste pour ajuster une taille de texte : une ligne suffit.
Les images responsives
Une image doit s’adapter à son conteneur, sans jamais déborder. La règle de base est universelle :
img {
max-width: 100%;
height: auto; /* préserve les proportions */
}
Pour aller plus loin et servir une image de poids adapté à chaque écran, le HTML dispose de srcset et sizes, qui laissent le navigateur choisir le bon fichier :
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(min-width: 768px) 50vw, 100vw"
alt="Description"
/>
Le mobile télécharge une image légère, le grand écran une plus détaillée : bénéfice direct pour les performances.
Les container queries en bref
Les media queries réagissent à la taille de l’écran. Les container queries, plus récentes, réagissent à la taille du conteneur parent — ce qui rend un composant réellement réutilisable, quel que soit l’endroit où on le place.
.carte-liste {
container-type: inline-size; /* déclare un conteneur mesurable */
}
/* La carte passe en ligne dès que SON conteneur dépasse 400px,
indépendamment de la largeur de l'écran */
@container (min-width: 400px) {
.carte {
display: flex;
gap: 1rem;
}
}
Désormais bien supportées par les navigateurs modernes, elles sont l’évolution naturelle du responsive par composant. À adopter progressivement, en gardant les media queries pour la structure globale de la page.
En résumé
Le responsive tient en une poignée de réflexes : la balise viewport en HTML, une approche mobile-first avec min-width, des breakpoints placés là où le design casse, et surtout des unités relatives (rem, %, vw) plutôt que des pixels figés. clamp() supprime une bonne partie des media queries pour la typographie, max-width: 100% règle les images, et les container queries ouvrent la voie à des composants vraiment adaptatifs. Moins de code, plus de fluidité : c’est tout l’esprit du CSS responsive moderne.