Responsivité et RWD - adapter ta page à chaque écran

Bon retour dans l'Égypte antique ! Tout comme les architectes égyptiens concevaient des structures destinées à durer des millénaires et à remplir différentes fonctions, nous devons créer des sites web qui s'affichent parfaitement sur chaque appareil - du petit smartphone au grand moniteur.

Le RWD (Responsive Web Design) est une approche dans laquelle une page adapte automatiquement son apparence à la taille de l'écran de l'utilisateur. Au lieu de créer des pages distinctes pour les téléphones et les ordinateurs, nous créons une seule page qui s'adapte avec souplesse.

La balise meta viewport - le fondement de la responsivité

Avant de commencer à écrire des styles responsives, nous devons indiquer au navigateur mobile que notre page est prête pour différents écrans. Pour cela, on utilise une balise <meta> spéciale dans la section <head> :

1<meta name="viewport" content="width=device-width, initial-scale=1.0">

Sans cette balise, le navigateur mobile affichera la page comme si elle avait été conçue pour un ordinateur de bureau (largeur ~980px), puis la réduira. Avec cette balise, le navigateur sait qu'il doit utiliser la largeur réelle de l'écran de l'appareil.

Les media queries - des styles différents pour des écrans différents

Les media queries sont des règles CSS qui permettent d'appliquer des styles différents selon les propriétés de l'appareil, le plus souvent la largeur de l'écran. On utilise la directive @media :

1/* Styles de base - pour tous les écrans */
2.container {
3  width: 100%;
4  padding: 10px;
5}
6
7/* Styles pour les tablettes (768px et plus) */
8@media (min-width: 768px) {
9  .container {
10    width: 750px;
11    margin: 0 auto;
12    padding: 20px;
13  }
14}
15
16/* Styles pour les ordinateurs de bureau (1024px et plus) */
17@media (min-width: 1024px) {
18  .container {
19    width: 960px;
20    padding: 30px;
21  }
22}
23
24/* Styles pour les grands écrans (1200px et plus) */
25@media (min-width: 1200px) {
26  .container {
27    width: 1140px;
28  }
29}

Remarque le min-width - cela signifie que les styles s'appliqueront à partir de la largeur donnée et au-dessus. C'est l'approche mobile-first.

Mobile-first vs Desktop-first

Il existe deux grandes approches pour écrire des styles responsives :

Mobile-first (recommandée) - on commence par les styles pour les plus petits écrans et on ajoute des styles pour les écrans progressivement plus grands à l'aide de min-width :

1/* Styles de base = mobile */
2.cards {
3  display: flex;
4  flex-direction: column;
5  gap: 10px;
6}
7
8/* Tablette */
9@media (min-width: 768px) {
10  .cards {
11    flex-direction: row;
12    flex-wrap: wrap;
13  }
14  .cards .card {
15    width: 48%;
16  }
17}
18
19/* Ordinateur de bureau */
20@media (min-width: 1024px) {
21  .cards .card {
22    width: 31%;
23  }
24}

Desktop-first - on commence par les grands écrans et on réduit à l'aide de max-width :

1/* Styles de base = ordinateur de bureau */
2.cards .card {
3  width: 31%;
4}
5
6@media (max-width: 1023px) {
7  .cards .card {
8    width: 48%;
9  }
10}
11
12@media (max-width: 767px) {
13  .cards {
14    flex-direction: column;
15  }
16  .cards .card {
17    width: 100%;
18  }
19}

Le mobile-first est recommandé car on traite d'abord les appareils les plus contraints, puis on ajoute des fonctionnalités pour les écrans plus grands.

Les breakpoints courants

Les breakpoints sont des valeurs seuils auxquelles la mise en page de la page change. Voici les plus couramment utilisés :

Les unités responsives

En RWD, au lieu de pixels fixes, il vaut mieux utiliser des unités relatives :

• % - pourcentage par rapport à l'élément parent
• vw / vh - pourcentage de la largeur / hauteur de la fenêtre du navigateur (viewport)
• rem - relatif à la taille de police de l'élément racine (<html>)
• em - relatif à la taille de police de l'élément parent

1/* Fixe - PAS responsive */
2.box { width: 400px; font-size: 16px; }
3
4/* Responsive - s'adapte à l'écran */
5.box {
6  width: 90%;          /* 90% de la largeur du parent */
7  max-width: 600px;    /* mais pas plus de 600px */
8  font-size: 1rem;     /* relatif à la taille de police racine */
9  padding: 2vw;        /* 2% de la largeur du viewport */
10  min-height: 50vh;    /* minimum 50% de la hauteur de l'écran */
11}

Flexbox et flex-wrap dans la responsivité

La propriété flex-wrap: wrap fait que les éléments flexbox passent automatiquement à la ligne suivante lorsqu'il n'y a pas assez de place. C'est l'un des moyens les plus simples de créer une mise en page responsive :

1.gallery {
2  display: flex;
3  flex-wrap: wrap;
4  gap: 16px;
5}
6
7.gallery-item {
8  flex: 1 1 250px;
9  /* flex-grow: 1 - l'élément grandit */
10  /* flex-shrink: 1 - l'élément rétrécit */
11  /* flex-basis: 250px - largeur minimale */
12}

Grâce à flex: 1 1 250px, chaque élément a une largeur minimale de 250px. Lorsque l'écran est trop étroit, les éléments passent automatiquement à la ligne suivante - sans qu'il soit nécessaire d'écrire des media queries !

La navigation responsive

La navigation est l'élément qui change le plus souvent entre le mobile et l'ordinateur de bureau :

1.nav {
2  display: flex;
3  flex-direction: column;
4}
5
6.nav-links {
7  display: none; /* Masqué sur mobile */
8}
9
10.nav-toggle {
11  display: block; /* Menu hamburger sur mobile */
12}
13
14@media (min-width: 768px) {
15  .nav {
16    flex-direction: row;
17    justify-content: space-between;
18    align-items: center;
19  }
20
21  .nav-links {
22    display: flex;
23    gap: 20px;
24  }
25
26  .nav-toggle {
27    display: none; /* Masquer le hamburger sur ordinateur de bureau */
28  }
29}

Récapitulatif des éléments clés du RWD

1. Balise meta viewport - informe le navigateur de la responsivité
2. Grille fluide - grille flexible basée sur des pourcentages
3. Images flexibles - images avec max-width: 100%
4. Media queries - styles différents pour différentes tailles d'écran

Ces quatre piliers du RWD sont comme les quatre murs d'une pyramide égyptienne - chacun est essentiel pour garantir que la construction soit stable et résiste sur tous les appareils.

Application pratique

Entraîne-toi à la responsivité dans l'éditeur ci-dessous. Essaie de redimensionner la fenêtre d'aperçu pour voir comment la mise en page s'adapte :

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  <title>RWD - Page responsive</title>
7  <link rel="stylesheet" href="/styles.css">
8</head>
9<body>
10  <nav class="nav">
11    <div class="nav-logo">Pyramid RWD</div>
12    <ul class="nav-links">
13      <li><a href="#">Accueil</a></li>
14      <li><a href="#">À propos</a></li>
15      <li><a href="#">Galerie</a></li>
16      <li><a href="#">Contact</a></li>
17    </ul>
18  </nav>
19
20  <header class="hero">
21    <h1>Page responsive</h1>
22    <p>Redimensionne la fenêtre d'aperçu pour voir comment la mise en page s'adapte !</p>
23  </header>
24
25  <main class="cards">
26    <div class="card">
27      <h2>Carte 1</h2>
28      <p>Cette carte s'adapte à l'écran grâce à flex-wrap et aux media queries.</p>
29    </div>
30    <div class="card">
31      <h2>Carte 2</h2>
32      <p>Sur les petits écrans, les cartes s'empilent les unes sous les autres.</p>
33    </div>
34    <div class="card">
35      <h2>Carte 3</h2>
36      <p>Sur les grands écrans, les cartes se placent côte à côte sur une seule ligne.</p>
37    </div>
38  </main>
39
40  <footer class="footer">
41    <p>&copy; 2024 Pyramid RWD</p>
42  </footer>
43</body>
44</html>