Une media query applique des règles CSS seulement si une condition est remplie, comme la largeur de la fenêtre ou la préférence de l'utilisateur (prefers-color-scheme, prefers-reduced-motion). Elle définit des points de rupture où la mise en page change. L'approche mobile d'abord utilise min-width.
Exemple
@media (min-width: 48rem) {
.grille { grid-template-columns: 1fr 1fr; }
}