Cours HTML et CSS · Module 5: Responsive design
La responsivité en CSS
Dans cette leçon4
Aujourd'hui, la même page s'affiche sur un téléphone tenu d'une seule main, sur une tablette et sur un large écran. Une mise en page qui accueille trois colonnes sur un ordinateur devient un entassement illisible sur un téléphone. Avant de bâtir quoi que ce soit, un architecte égyptien demandait toujours : de combien de place disposons-nous ? Dans ce lieu, tu vas apprendre à ta page à se poser la même question.
Ce que tu vas apprendre
- vérifier la largeur de l'écran grâce aux media queries,
- combiner des conditions et choisir des breakpoints pour le téléphone, la tablette et l'ordinateur,
- configurer le viewport, grâce auquel le téléphone affiche la page à sa véritable échelle,
- construire des conteneurs fluides et utiliser les unités
vwetvh, - adapter les images à l'écran et concevoir selon l'approche mobile-first,
- assembler le tout dans une galerie responsive.
Introduction
La responsivité en CSS désigne la capacité d'une page web à s'adapter dynamiquement à différentes tailles d'écran et appareils, comme les ordinateurs de bureau, les ordinateurs portables, les tablettes et les smartphones. Grâce au design responsive, une page peut offrir une expérience utilisateur optimale quelle que soit la façon dont elle est affichée.
Les media queries
Le principal outil pour créer un design responsive en CSS, ce sont les fameuses « media queries ». Elles te permettent d'appliquer différents styles selon les caractéristiques de l'appareil, comme la largeur de l'écran, l'orientation et la résolution. Chacune commence par @media, puis tu indiques une condition entre parenthèses et, entre accolades, les règles qui ne doivent s'appliquer que lorsque cette condition est remplie. La condition min-width signifie : à partir de cette largeur et au-delà, et max-width : jusqu'à cette largeur incluse.
Exemple : changer les styles selon différentes largeurs d'écran
Tu peux utiliser les media queries pour appliquer différents styles selon la largeur de l'écran. Voici deux blocs qui répartissent les écrans entre ceux qui sont plus étroits et ceux qui sont plus larges que 600 pixels :
1/* Styles pour les écrans de 600px de large ou plus */
2@media (min-width: 600px) {
3 .container {
4 width: 80%;
5 margin: 0 auto;
6 }
7}
8
9/* Styles pour les écrans plus étroits que 600px */
10@media (max-width: 599px) {
11 .container {
12 width: 100%;
13 padding: 10px;
14 }
15}Dans l'exemple ci-dessus, pour les écrans de 600px de large ou plus, le conteneur a une largeur de 80% et des marges centrées. Pour les écrans plus étroits que 600px, le conteneur occupe toute la largeur avec un padding supplémentaire. Remarque le 599px dans la deuxième condition : les deux conditions incluent leur valeur limite, donc si la seconde indiquait aussi 600px, les deux blocs s'appliqueraient en même temps à exactement cette largeur.
Exemple : changer le sens de la disposition pour tablettes et smartphones
Tu peux aussi combiner les media queries avec Flexbox pour modifier la disposition selon la taille de l'écran. Par défaut, le conteneur place ses éléments en ligne, et sur un écran plus étroit, il passe en colonne :
1.container {
2 display: flex;
3 flex-direction: row; /* Disposition par défaut pour les grands écrans */
4}
5
6/* Pour les écrans plus étroits que 768px, on change le sens en colonne */
7@media (max-width: 768px) {
8 .container {
9 flex-direction: column;
10 }
11}Dans ce cas, pour les écrans jusqu'à 768px de large, le sens de la disposition passe en colonne. Le code HTML reste le même, seule la façon dont il est disposé change.
Combiner des conditions
Parfois, un style ne doit s'appliquer que dans une plage précise, par exemple uniquement sur les tablettes. Tu combines alors deux conditions avec le mot and, et les règles ne s'appliquent que si les deux sont remplies :
1/* Tablette : de 768px à 1024px */
2@media (min-width: 768px) and (max-width: 1024px) {
3 .container {
4 width: 90%;
5 margin: 0 auto;
6 }
7}Sur un téléphone comme sur un large écran, ce bloc ne s'activera pas, car l'une des conditions est toujours fausse. Ces seuils s'appellent des breakpoints. Un découpage courant place les téléphones jusqu'à 767px, les tablettes de 768px à 1024px et les ordinateurs à partir de 1025px, mais c'est une convention, pas une norme. Mon conseil : place un breakpoint là où ta mise en page commence à se casser, et non là où s'arrête un modèle de téléphone précis.
Résumé
La responsivité en CSS est essentielle pour créer des sites web qui s'affichent et fonctionnent bien sur différents appareils et tailles d'écran. En utilisant les media queries, tu peux ajuster avec souplesse l'apparence d'une page à différentes conditions, garantissant une excellente présentation et une bonne ergonomie sur diverses plateformes. Mais pour que les media queries fonctionnent sur les téléphones, la page a besoin d'une balise dans la section head, dont je te parlerai dans la prochaine leçon.
Dans l'éditeur ci-dessous, tu trouveras les media queries en pratique, Flexbox et Grid en version responsive, les unités, les images et une démonstration des breakpoints. Modifie la largeur de l'aperçu et observe quelles règles s'activent.
Code de cette leçon : index.html
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>La responsivité en CSS</title>
7 <link rel="stylesheet" href="style.css">
8</head>
9<body>
10 <div class="container">
11 <header class="header">
12 <h1>La responsivité en CSS</h1>
13 <p>Change la taille de la fenêtre du navigateur pour voir les effets</p>
14 </header>
15
16 <nav class="navigation">
17 <ul>
18 <li><a href="#media">Media Queries</a></li>
19 <li><a href="#flexbox">Flexbox</a></li>
20 <li><a href="#grid">CSS Grid</a></li>
21 <li><a href="#units">Unités</a></li>
22 <li><a href="#images">Images</a></li>
23 </ul>
24 <div class="hamburger">
25 <span></span>
26 <span></span>
27 <span></span>
28 </div>
29 </nav>
30
31 <main class="main-content">
32 <section id="media" class="section">
33 <h2>Media Queries en pratique</h2>
34 <div class="media-demo">
35 <div class="responsive-box">
36 <p>Cette section change de couleur selon la taille de l'écran :</p>
37 <ul>
38 <li>Mobile (< 768px) : Rose</li>
39 <li>Tablette (768px - 1024px) : Bleu</li>
40 <li>Desktop (> 1024px) : Vert</li>
41 </ul>
42 </div>
43 </div>
44 </section>
45
46 <section id="flexbox" class="section">
47 <h2>Flexbox responsive</h2>
48 <div class="flex-responsive">
49 <div class="flex-item">Élément 1</div>
50 <div class="flex-item">Élément 2</div>
51 <div class="flex-item">Élément 3</div>
52 <div class="flex-item">Élément 4</div>
53 </div>
54 <p class="help-text">Sur mobile : colonne, sur desktop : ligne</p>
55 </section>
56
57 <section id="grid" class="section">
58 <h2>CSS Grid responsive</h2>
59 <div class="grid-responsive">
60 <div class="grid-item">1</div>
61 <div class="grid-item">2</div>
62 <div class="grid-item">3</div>
63 <div class="grid-item">4</div>
64 <div class="grid-item">5</div>
65 <div class="grid-item">6</div>
66 </div>
67 <p class="help-text">Ajustement automatique des colonnes à la largeur</p>
68 </section>
69
70 <section id="units" class="section">
71 <h2>Unités responsives</h2>
72 <div class="units-demo">
73 <div class="unit-box vw-box">
74 <h3>Unités VW</h3>
75 <p>Largeur : 50vw (50% de la largeur de la fenêtre)</p>
76 </div>
77 <div class="unit-box vh-box">
78 <h3>Unités VH</h3>
79 <p>Hauteur : 30vh (30% de la hauteur de la fenêtre)</p>
80 </div>
81 <div class="unit-box rem-box">
82 <h3>Unités REM</h3>
83 <p>Taille basée sur le font-size racine</p>
84 </div>
85 <div class="unit-box em-box">
86 <h3>Unités EM</h3>
87 <p>Taille relative au parent</p>
88 </div>
89 </div>
90 </section>
91
92 <section id="images" class="section">
93 <h2>Images et médias responsives</h2>
94 <div class="image-demo">
95 <div class="image-container">
96 <img src="https://picsum.photos/800/400?random=1" alt="Image responsive">
97 <p>L'image se met automatiquement à l'échelle</p>
98 </div>
99 <div class="video-container">
100 <div class="video-placeholder">
101 <p>Vidéo responsive</p>
102 <p>Format 16:9</p>
103 </div>
104 </div>
105 </div>
106 </section>
107
108 <section class="section">
109 <h2>Démonstration des points de rupture</h2>
110 <div class="breakpoint-demo">
111 <div class="breakpoint-indicator mobile">Mobile</div>
112 <div class="breakpoint-indicator tablet">Tablette</div>
113 <div class="breakpoint-indicator desktop">Desktop</div>
114 <div class="breakpoint-indicator large">Grand desktop</div>
115 </div>
116 <p class="help-text">Le point de rupture actif est mis en évidence</p>
117 </section>
118 </main>
119
120 <aside class="sidebar">
121 <h3>Barre latérale</h3>
122 <div class="sidebar-content">
123 <div class="widget">
124 <h4>Astuces responsive</h4>
125 <ul>
126 <li>Approche mobile-first</li>
127 <li>Unités flexibles (%, em, rem)</li>
128 <li>Balise meta viewport</li>
129 <li>Images flexibles</li>
130 </ul>
131 </div>
132 <div class="widget">
133 <h4>Points de rupture courants</h4>
134 <ul>
135 <li>Mobile : < 768px</li>
136 <li>Tablette : 768px - 1024px</li>
137 <li>Desktop : > 1024px</li>
138 <li>Grand : > 1440px</li>
139 </ul>
140 </div>
141 </div>
142 </aside>
143
144 <footer class="footer">
145 <p>© 2024 Page responsive - Démo CSS</p>
146 </footer>
147 </div>
148</body>
149</html>Souviens-toi : une page responsive est un temple que l'architecte adapte à son terrain, et les media queries sont sa façon de demander combien de place il y a cette fois-ci.
Tu as repéré une erreur dans cette leçon ?
Teste tes connaissances
Réponds aux questions de cette leçon. Choisis une réponse pour voir tout de suite si elle est correcte.
1. Que signifie la responsivité dans le contexte des sites web ?
2. Comment commence-t-on la définition d'une media query en CSS ?
Voici 2 des 3 questions de cette leçon. Réponds aux autres dans le jeu.
Tâches pratiques dans le jeu
- Éditeur de code
Crée un conteneur responsive pour tablette à l'aide d'une media query. HTML : <div class='container'>Temple sur tablette</div>. CSS de base : .container {width: 100%; background: #F4E4C1; padding: 20px;}. Ajoute ensuite @media (min-width: 768px) and (max-width: 1024px) { .container {width: 90%; margin: 0 auto; background: #FFD700; font-size: 20px; border: 3px solid #8B4513;} }. Teste en redimensionnant la fenêtre - observe comment le style change sur tablette !
- Clique dans l'ordre
Place dans l'ordre la syntaxe de la media query :
- Clique dans l'ordre
Énumère les points de rupture standards :