Les media queries

Les media queries sont un outil puissant en CSS qui te permet d'appliquer différents styles selon les caractéristiques de l'appareil, comme la résolution, l'orientation de l'écran, la densité de pixels, et bien plus encore. Grâce aux media queries, les designers peuvent créer des sites web responsives qui s'adaptent à différents appareils et conditions d'affichage.

Applications de base

Largeur et hauteur de l'écran

Les media queries te permettent d'appliquer différents styles selon la largeur et la hauteur de l'écran.

1/* Styles pour les écrans d'une largeur minimale de 600px */
2@media (min-width: 600px) {
3  .container {
4    width: 80%;
5  }
6}
7
8/* Styles pour les écrans d'une hauteur maximale de 800px */
9@media (max-height: 800px) {
10  .footer {
11    display: none;
12  }
13}

Orientation de l'écran

Tu peux aussi utiliser les media queries pour détecter l'orientation de l'écran (portrait ou paysage).

1/* Styles pour les écrans en orientation paysage */
2@media (orientation: landscape) {
3  .landscape-layout {
4    display: flex;
5  }
6}

Type d'appareil

Les media queries permettent d'appliquer des styles selon le type d'appareil, par exemple une imprimante ou un projecteur.

1/* Styles pour l'impression */
2@media print {
3  body {
4    font-size: 12pt;
5    color: black;
6  }
7}

Techniques avancées

Combiner des conditions

Tu peux combiner différentes conditions dans une seule requête à l'aide d'opérateurs logiques comme and, not et only.

1/* Styles pour les écrans d'une largeur minimale de 800px et d'une densité de pixels maximale de 2 */
2@media (min-width: 800px) and (max-resolution: 2dppx) {
3  .header {
4    background-color: blue;
5  }
6}

Utiliser des variables CSS

Tu peux aussi utiliser les media queries avec des variables CSS pour créer un code plus dynamique et flexible.

1:root {
2  --main-color: red;
3}
4
5@media (min-width: 800px) {
6  :root {
7    --main-color: blue;
8  }
9}
10
11.header {
12  background-color: var(--main-color);
13}

Les media queries sont un élément clé du web design responsive, permettant un contrôle précis de l'apparence d'une page dans différentes situations. Des applications simples, comme l'ajustement à la largeur de l'écran, aux techniques avancées utilisant les variables CSS, les media queries offrent un large éventail de possibilités aux designers web modernes. Maîtriser cette technique te permettra de créer des pages qui sont non seulement attrayantes visuellement, mais aussi utiles et accessibles sur différents appareils et plateformes.

Tâche : créer une mise en page responsive

Objectif

Créer une mise en page de page responsive qui s'adapte à différentes tailles d'écran en utilisant les media queries et les unités vw, vh, em et rem.

Étapes à réaliser

1. Structure HTML : Crée un nouveau fichier HTML et ajoute la structure de base du document.

   1<!DOCTYPE html>
   2<html lang="en">
   3<head>
   4  <meta charset="UTF-8">
   5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   6  <link rel="stylesheet" href="styles.css">
   7  <title>Mise en page responsive</title>
   8</head>
   9<body>
   10  <header class="header">
   11    <h1>Design responsive</h1>
   12  </header>
   13  <main class="main-content">
   14    <section class="section">
   15      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   16    </section>
   17    <section class="section">
   18      <p>Curabitur pretium tincidunt lacus. Nulla gravida orci a odio.</p>
   19    </section>
   20  </main>
   21  <footer class="footer">
   22    <p>&copy; 2024 Design responsive</p>
   23  </footer>
   24</body>
   25</html>

2. Style CSS de base : Ajoute la mise en forme dans le fichier styles.css.

   1body {
   2  font-family: Arial, sans-serif;
   3  margin: 0;
   4  padding: 0;
   5}
   6
   7.header, .footer {
   8  background-color: #333;
   9  color: #fff;
   10  text-align: center;
   11  padding: 1rem 0;
   12}
   13
   14.main-content {
   15  padding: 1rem;
   16}
   17
   18.section {
   19  margin-bottom: 1rem;
   20  padding: 1rem;
   21  background-color: #f4f4f4;
   22}
   23
   24p {
   25  font-size: 1rem; /* 1rem = 16px */
   26  line-height: 1.5;
   27}
   28
   29h1 {
   30  font-size: 2rem; /* 2 * 16px = 32px */
   31}

3. Unités responsives et media queries : Ajoute des media queries et utilise les unités vw, vh, em et rem.

   1/* Style pour les appareils d'une largeur minimale de 600px */
   2@media (min-width: 600px) {
   3  .main-content {
   4    padding: 2rem;
   5  }
   6
   7  .section {
   8    margin-bottom: 2rem;
   9    padding: 2rem;
   10  }
   11
   12  p {
   13    font-size: 1.2rem; /* 1.2 * 16px = 19.2px */
   14  }
   15
   16  h1 {
   17    font-size: 3rem; /* 3 * 16px = 48px */
   18  }
   19}
   20
   21/* Style pour les appareils d'une largeur minimale de 800px */
   22@media (min-width: 800px) {
   23  .header, .footer {
   24    padding: 2rem 0;
   25  }
   26
   27  .section {
   28    display: flex;
   29    justify-content: space-between;
   30  }
   31
   32  .section p {
   33    font-size: 1.5rem; /* 1.5 * 16px = 24px */
   34  }
   35}
   36
   37/* Style pour les appareils d'une largeur minimale de 1200px */
   38@media (min-width: 1200px) {
   39  .header h1 {
   40    font-size: 5vw; /* 5% de la largeur de la fenêtre du navigateur */
   41  }
   42
   43  .section {
   44    margin-bottom: 3rem;
   45    padding: 3rem;
   46  }
   47
   48  .section p {
   49    font-size: 2rem; /* 2 * 16px = 32px */
   50  }
   51}

4. Tests : Teste la page à différentes tailles de fenêtre du navigateur pour t'assurer que la mise en page s'ajuste correctement.

Résumé

Les media queries et les unités responsives (vw, vh, em, rem) sont essentielles pour créer des sites web modernes et responsives. Grâce à elles, on peut ajuster la mise en page, les tailles de texte et d'autres éléments selon la taille de l'écran et d'autres caractéristiques de l'appareil. Maîtriser ces techniques te permet de créer des designs web plus flexibles, utiles et esthétiques.