Les unités responsives vw, vh + unités relatives

Dans les leçons précédentes, tu as pu aborder le sujet des unités. La responsivité est un bon thème pour expliquer tous les types d'unités :

Unités absolues - ce sont des valeurs qui ne dépendent pas relativement de valeurs déjà déclarées pour d'autres éléments.

• cm - centimètres
• mm - millimètres
• px - pixels (1px = 1/96e de 1in)

Unités relatives - elles définissent une valeur par rapport à une autre valeur. Les unités relatives s'adaptent mieux aux appareils responsives.

em - relatif au font-size de l'élément (2em signifie 2 fois la taille de l'élément actuel) rem - relatif à l'élément racine - le plus souvent l'élément html vw - 1vw correspond à 1% de la largeur actuelle de l'appareil vh - 1vh correspond à 1% de la hauteur actuelle de l'appareil % - relatif à l'élément parent

Les unités de viewport (vw, vh)

Les unités vw (viewport width) et vh (viewport height) sont des unités équivalentes à un pourcentage de la largeur ou de la hauteur de la fenêtre du navigateur.

vw - Viewport Width

1vw correspond à 1% de la largeur de la fenêtre du navigateur.

1h1 {
2  font-size: 5vw; /* La taille de la police s'ajuste à 5% de la largeur de la fenêtre du navigateur */
3}

vh - Viewport Height

1vh correspond à 1% de la hauteur de la fenêtre du navigateur.

1.section {
2  height: 50vh; /* La hauteur de la section s'ajuste à 50% de la hauteur de la fenêtre du navigateur */
3}

Les unités relatives (em, rem)

Les unités relatives, comme em et rem, permettent aux éléments de se redimensionner par rapport à la taille de la police.

em

L'unité em est relative à la taille de police de l'élément parent.

1p {
2  font-size: 16px;
3}
4
5p span {
6  font-size: 1.5em; /* 1.5 * 16px = 24px */
7}

rem

L'unité rem est relative à la taille de police de l'élément racine, qui est généralement l'élément <html>.

1html {
2  font-size: 16px;
3}
4
5h1 {
6  font-size: 2rem; /* 2 * 16px = 32px */
7}

Applications pratiques

• Mise à l'échelle du texte : vw et rem sont utiles pour redimensionner la taille du texte selon la taille de la fenêtre du navigateur ou une taille de base.
• Création de mises en page responsives : vh et vw peuvent servir à créer des mises en page qui s'adaptent parfaitement à différentes tailles d'écran.
• Design modulaire : les unités relatives comme em et rem permettent de créer un code CSS plus modulaire et flexible, facile à adapter et à maintenir.

Tâche : mise en page responsive avec les unités vw, vh, em et rem

Ta tâche consiste à créer une page web avec une mise en page responsive en utilisant les unités vw, vh, em et rem. La page doit être composée d'un en-tête, d'une section principale avec deux colonnes et d'un pied de page.

Étape 1 : créer une structure HTML de base

Crée un nouveau fichier HTML et ajoute la structure de base d'un document HTML. Ajoute un en-tête, une section principale avec deux colonnes et un pied de page.

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"> <!-- Lien vers le fichier CSS -->
7  <title>Mise en page responsive</title>
8</head>
9<body>
10  <header class="header">
11    <h1>En-tête responsive</h1>
12  </header>
13  <main class="main">
14    <section class="section">
15      <div class="column">
16        <h2>Colonne 1</h2>
17        <p>Ceci est un exemple de paragraphe de texte dans la colonne 1.</p>
18      </div>
19      <div class="column">
20        <h2>Colonne 2</h2>
21        <p>Ceci est un exemple de paragraphe de texte dans la colonne 2.</p>
22      </div>
23    </section>
24  </main>
25  <footer class="footer">
26    <p>&copy; 2023 Mise en page responsive. Tous droits réservés.</p>
27  </footer>
28</body>
29</html>

Étape 2 : créer un fichier CSS

Ouvre ou crée un nouveau fichier CSS et enregistre-le sous le nom styles.css.

Étape 3 : mise en forme de base

Ajoute des styles de base pour les éléments .header, .main, .section, .column et .footer. Utilise les unités vw, vh, em et rem pour créer une mise en page responsive.

1body {
2  font-family: Arial, sans-serif;
3  margin: 0;
4  padding: 0;
5  background-color: #f0f0f0;
6}
7
8.header {
9  background-color: #333;
10  color: #fff;
11  padding: 2vh 0;
12  text-align: center;
13}
14
15.main {
16  padding: 2vw;
17}
18
19.section {
20  display: flex;
21  justify-content: space-between;
22}
23
24.column {
25  width: 48%;
26  background-color: #fff;
27  padding: 2em;
28  border-radius: 1rem;
29  box-shadow: 0 0 10px rgba(0,0,0,0.1);
30}
31
32.column h2 {
33  font-size: 2rem;
34  margin-bottom: 1em;
35}
36
37.column p {
38  font-size: 1.2rem;
39}
40
41.footer {
42  background-color: #333;
43  color: #fff;
44  text-align: center;
45  padding: 1vh 0;
46}

Étape 4 : ajouter des media queries pour la responsivité

Pour rendre la mise en page encore plus responsive, ajoute des media queries afin d'ajuster la disposition sur les écrans plus petits.

1@media (max-width: 768px) {
2  .section {
3    flex-direction: column;
4  }
5
6  .column {
7    width: 100%;
8    margin-bottom: 2vh;
9  }
10
11  .column:last-child {
12    margin-bottom: 0;
13  }
14}
15
16@media (max-width: 480px) {
17  .header {
18    padding: 3vh 0;
19  }
20
21  .column {
22    padding: 1em;
23  }
24
25  .column h2 {
26    font-size: 1.5rem;
27  }
28
29  .column p {
30    font-size: 1rem;
31  }
32}

Tâche supplémentaire

1. Ajoute d'autres sections à la page et expérimente avec différentes valeurs de vw, vh, em et rem pour voir comment la disposition change.
2. Teste tes compétences en ajoutant d'autres éléments, comme des images, des boutons ou des formulaires, et observe comment les différentes unités affectent leur responsivité.
3. Ajoute différents styles à ta page, par exemple en changeant les couleurs, les marges ou d'autres propriétés des éléments, pour mieux comprendre comment fonctionnent les différentes options CSS.
4. Ajoute des animations aux éléments pour ajouter de l'interactivité et une meilleure expérience utilisateur.

Résumé

Comprendre et utiliser les différentes unités CSS est essentiel pour créer des mises en page responsives et flexibles. Expérimente avec différentes unités et différents styles pour mieux comprendre leur fonctionnement et la façon de les utiliser pour créer de beaux sites web responsives.