> Guide du responsive design en CSS : approche mobile-first, media queries min/max-width, choix des breakpoints, unités relatives (rem, %, vw), images responsives, clamp() et container queries.
*Source : https://coder-studio.com/tutoriels/css-responsive-media-queries/*
---
[// Web](https://coder-studio.com/tutoriels/)
# Le responsive en CSS : media queries et bonnes pratiques
Par **Kévin Papot** · publié le 8 janvier 2026
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 ``. Sans elle, les mobiles simulent un écran large et « dézooment » la page, ruinant tout le responsive.
```
```
`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 (``, 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 :
```
```
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.
## À lire ensuite
- [CSS Grid : le guide complet pour maîtriser la grille](https://coder-studio.com/tutoriels/css-grid-guide/)
- [Flexbox : le guide complet par l’exemple](https://coder-studio.com/tutoriels/flexbox-guide/)
- [La propriété position en CSS (static, relative, absolute, fixed, sticky)](https://coder-studio.com/tutoriels/position-css/)