Responsive design
10 min · Intermédiaire · 7 août 2026
Une condition basée sur la largeur de l’écran
.conteneur {
display: flex;
}
@media (max-width: 600px) {
.conteneur {
flex-direction: column; /* empile verticalement sous 600px de large */
}
}max-width: 600px signifie « au plus 600 pixels » : les règles à l’intérieur du bloc ne s’appliquent que sous ce seuil, ignorées au-delà.
Info
Flexbox et Grid, vus dans les chapitres précédents, s’adaptent déjà souvent naturellement à l’espace disponible, sans la moindre media query. Les media queries interviennent en complément, pour des ajustements plus précis (changer une direction, masquer un élément, agrandir un texte).
À toi de jouer
Écris une media query qui s’applique quand la largeur de l’écran est de 600 pixels ou moins.
Astuce
L’aperçu de ce bac à sable garde une taille fixe : ce test vérifie que la règle est bien écrite dans le CSS, pas son effet visuel immédiat (qui dépendrait de la largeur réelle de la fenêtre).
<!-- HTML -->
<div class="conteneur">Contenu</div>
/* CSS */
/* Ecris ta media query ici */