📘 Chapitre 6 – Media Queries

1. 🎯 Objectif pédagogique

Apprendre à rendre un site responsive en utilisant les media queries pour adapter l’affichage des éléments en fonction de la taille de l’écran (mobile, tablette, desktop).

2. 📚 Concepts abordés

  • Syntaxe des media queries : @media
  • Breakpoints courants (320px, 768px, 1024px)
  • Modification des styles selon la largeur ou la hauteur de l’écran
  • Utilisation combinée avec Flexbox et Grid pour créer des interfaces adaptatives

3. 🧠 Explication théorique

Les media queries permettent d’appliquer des styles spécifiques en fonction des caractéristiques du périphérique (taille d’écran, orientation, etc.).

Exemple de media query :

@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

Dans cet exemple, si la fenêtre est inférieure ou égale à 768px, la couleur de fond devient bleue.

Bonnes pratiques :

  • Commencer par un design mobile-first (styles pour petits écrans en premier).
  • Utiliser des breakpoints logiques en fonction du contenu.
  • Tester sur plusieurs tailles d’écrans.

4. 🛠 Tutoriel pratique

Résumé du travail : Créer une page avec une mise en page qui change entre la version desktop et mobile grâce aux media queries.

Arborescence du projet :

mon_projet/
├── index.html
└── style.css

Étape 1 : Structure HTML 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Queries</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>Header</header>
    <main>
      <section>Section principale</section>
      <aside>Sidebar</aside>
    </main>
    <footer>Footer</footer>
  </body>
</html>

Étape 2 : Styles CSS avec media queries 

body {
  font-family: Arial, sans-serif;
  margin: 0;
}

main {
  display: flex;
}

section {
  flex: 2;
  background: #ecf0f1;
  padding: 20px;
}

aside {
  flex: 1;
  background: #bdc3c7;
  padding: 20px;
}

/* Media Query pour écrans <= 768px */
@media (max-width: 768px) {
  main {
    flex-direction: column;
  }

  section, aside {
    flex: none;
    width: 100%;
  }
}

5. 🧾 Résumé et points-clés

  • Les media queries adaptent le style selon la taille de l’écran.
  • @media (max-width: …) est souvent utilisé pour les écrans plus petits.
  • Le mobile-first consiste à écrire d’abord les styles pour mobile, puis à élargir.