Media Queries

Les media queries adaptent le style à la taille d'écran.

Elles permettent de garder une interface lisible sur mobile, tablette et desktop sans dupliquer toute la feuille CSS.

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

Commencer par adapter la structure, puis les tailles et espacements.

Point clé : on ajuste d'abord le layout, puis on affine typographie, marges et détails visuels.

A retenir

Une media query ne doit pas tout réécrire. Elle ajuste ce qui devient inconfortable à lire ou à utiliser quand l'écran change de taille.

Mini pratique

Part d'une grille en 3 colonnes, puis cree deux breakpoints pour passer en 2 puis 1 colonne. Teste aussi l'impact sur les marges internes des cartes.

Erreurs fréquentes

• appliquer des valeurs sans vérifier l'impact sur mobile
• surcharger la feuille de style au lieu de simplifier les sélecteurs
• corriger un symptôme visuel sans comprendre la cause (cascade, flux ou dimensions)

Checklist rapide

• la règle est-elle lisible et cohérente avec le reste du module ?
• le rendu reste-t-il correct sur petit écran ?
• la solution est-elle maintenable sans !important ?

Mini défi

Reprends l'exemple de cette leçon, retire une règle inutile, et conserve exactement le même rendu visuel.