Conteneurs responsives et mise en page fluide

Imagine que tu construis un temple dans l'Égypte antique. Les murs du temple doivent accueillir tous les hiéroglyphes et toutes les sculptures, que la salle soit étroite ou spacieuse. En CSS, ça fonctionne de la même façon : un conteneur doit s'adapter à l'espace disponible.

Mise en page fixe vs fluide

Traditionnellement, les pages étaient construites avec des largeurs fixes en pixels. Le problème ? Sur un petit téléphone, le contenu dépassait de l'écran, et sur un écran immense, il n'occupait qu'une étroite bande.

1/* Mise en page fixe - MAUVAISE approche */
2.container {
3  width: 960px; /* Toujours 960px, quel que soit l'écran */
4}

La solution, c'est une mise en page fluide : on utilise des unités en pourcentage au lieu des pixels :

1/* Mise en page fluide - BONNE approche */
2.container {
3  width: 100%; /* Occupe toute la largeur disponible */
4}

Le motif du conteneur responsive

Un motif clé en CSS responsive, c'est le conteneur responsive. Il combine trois propriétés :

1.container {
2  width: 100%;         /* Pleine largeur sur petits écrans */
3  max-width: 1200px;   /* Limite sur grands écrans */
4  margin: 0 auto;      /* Centrage sur la page */
5}

Comment ça marche ?

• Sur un téléphone (320px de large) - le conteneur fait 320px (100% de l'écran)
• Sur une tablette (768px) - le conteneur fait 768px (100% de l'écran)
• Sur un ordinateur portable (1366px) - le conteneur fait 1200px (max-width) et est centré
• Sur un grand écran (1920px) - le conteneur fait toujours 1200px, centré avec des marges des deux côtés

C'est comme un couloir dans une pyramide : le contenu n'est jamais trop large, mais dans les passages étroits il utilise tout l'espace disponible.

box-sizing: border-box

L'une des déclarations CSS les plus importantes pour le design responsive :

1*, *::before, *::after {
2  box-sizing: border-box;
3}

Sans border-box, le padding et la bordure s'ajoutent à la largeur de l'élément :

1/* Sans border-box */
2.box {
3  width: 100%;
4  padding: 20px;
5  /* Largeur réelle : 100% + 40px de padding = ÇA DÉPASSE DE L'ÉCRAN ! */
6}
7
8/* Avec border-box */
9.box {
10  box-sizing: border-box;
11  width: 100%;
12  padding: 20px;
13  /* Largeur réelle : 100% (le padding est À L'INTÉRIEUR) */
14}

C'est une règle fondamentale : sans border-box, un élément avec width: 100% et du padding sera plus large que l'écran !

Exemple pratique : section de contenu

Voyons comment construire une section de page responsive sans utiliser Flexbox ni Grid :

1<section class="features">
2  <div class="container">
3    <h2>À propos de l'Égypte antique</h2>
4    <p>La civilisation égyptienne a duré plus de 3000 ans...</p>
5  </div>
6</section>

1* {
2  box-sizing: border-box;
3}
4
5.features {
6  width: 100%;           /* Section en pleine largeur */
7  padding: 40px 20px;    /* Espacement intérieur */
8  background-color: #F4E4C1;
9}
10
11.container {
12  width: 100%;
13  max-width: 1200px;
14  margin: 0 auto;       /* Centrage */
15  padding: 0 20px;      /* Padding latéral - le contenu ne colle pas aux bords */
16}

Plusieurs conteneurs sur une page

La force du motif conteneur, c'est que tu peux l'utiliser plusieurs fois :

1<header class="hero">
2  <div class="container">
3    <h1>Grande pyramide de Gizeh</h1>
4  </div>
5</header>
6
7<section class="about">
8  <div class="container">
9    <p>Informations sur la pyramide...</p>
10  </div>
11</section>
12
13<footer class="footer">
14  <div class="container">
15    <p>Pied de page</p>
16  </div>
17</footer>

Chaque section peut avoir une couleur de fond différente sur 100% de largeur, mais le contenu à l'intérieur est toujours limité par le conteneur. Si un designer change la mise en page de 1200px à 1440px, tu changes une seule valeur de max-width dans la classe .container.

Le padding comme espace de sécurité

Sur les appareils mobiles, le contenu ne doit pas coller tout au bord de l'écran. C'est pour ça qu'on ajoute du padding :

1.container {
2  width: 100%;
3  max-width: 1200px;
4  margin: 0 auto;
5  padding-left: 16px;   /* Espace de sécurité à gauche */
6  padding-right: 16px;  /* Espace de sécurité à droite */
7}

Sur les écrans plus grands (tablettes), tu peux augmenter ce padding à l'aide des media queries :

1@media (min-width: 768px) {
2  .container {
3    padding-left: 32px;
4    padding-right: 32px;
5  }
6}

Résumé

Un conteneur responsive est le fondement de tout site web :

• width: 100% - s'adapte aux petits écrans
• max-width - limite sur les grands écrans
• margin: 0 auto - centrage
• box-sizing: border-box - le padding n'agrandit pas l'élément
• padding - espace de sécurité par rapport aux bords

Essaie ce motif dans l'éditeur ci-dessous :

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>Conteneurs responsives - Fluid Layout</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <header class="hero">
11        <div class="container">
12            <h1>Pyramide de Khéops</h1>
13            <p>Découvre les secrets des conteneurs responsives</p>
14        </div>
15    </header>
16
17    <section class="about">
18        <div class="container">
19            <h2>Conteneur avec max-width</h2>
20            <p>Ce conteneur a <code>width: 100%</code> et <code>max-width: 1200px</code>. Sur les petits écrans il occupe toute la largeur, sur les grands il est limité à 1200px et centré.</p>
21            <p>Change la taille de la fenêtre du navigateur pour voir comment le conteneur se comporte !</p>
22        </div>
23    </section>
24
25    <section class="comparison">
26        <div class="container">
27            <h2>Fixed vs Fluid Layout</h2>
28
29            <div class="box fixed-box">
30                <h3>Fixed</h3>
31                <p>width: 960px - ne s'adapte pas à l'écran</p>
32            </div>
33
34            <div class="box fluid-box">
35                <h3>Fluid</h3>
36                <p>width: 100% + max-width: 800px - s'adapte !</p>
37            </div>
38        </div>
39    </section>
40
41    <section class="box-sizing-demo">
42        <div class="container">
43            <h2>box-sizing: border-box</h2>
44
45            <div class="box without-border-box">
46                <h3>Sans border-box</h3>
47                <p>width: 100% + padding: 30px = ça dépasse du conteneur !</p>
48            </div>
49
50            <div class="box with-border-box">
51                <h3>Avec border-box</h3>
52                <p>width: 100% + padding: 30px = ça tient parfaitement !</p>
53            </div>
54        </div>
55    </section>
56
57    <footer class="footer">
58        <div class="container">
59            <p>Pied de page - même conteneur que ci-dessus</p>
60        </div>
61    </footer>
62</body>
63</html>