BananaMaster

6 Comment fonctionnent %, vw et vh en CSS - ( HTML et CSS, Front End )

Si tu as oublié quelque chose — clique pour retourner à la leçon.

📘 Exercices pratiques : %, vw, vh

Pour chaque tâche, crée des classes séparées dans le fichier style.css et applique-les aux balises correspondantes.

📌 Structure des fichiers : index.html + style.css

✏️ Tâche 1

Reproduis le bloc. Estime les dimensions du parent à l'œil :

• Estime les tailles à l'œil
• Parent — fond : #2c3e50, dimensions en px
• Enfant — fond : #e74c3c, dimensions en %

✏️ Tâche 2

Reproduis le bloc. Estime les dimensions du parent à l'œil :

• Estime les tailles à l'œil
• Parent — fond : #8e44ad, dimensions en px
• Enfant — fond : #f1c40f, dimensions en %

✏️ Tâche 3

Reproduis les blocs imbriqués. Estime les dimensions du parent à l'œil :

• Estime les tailles à l'œil
• Parent — fond : #16a085, dimensions en px
• Enfant — fond : #e67e22, dimensions en %

✏️ Tâche 4

Trois blocs enfants sont en colonne et se partagent la hauteur du parent. Estime les dimensions du parent à l'œil :

• Estime les tailles à l'œil
• Parent — fond : #2d3436, dimensions en px
• Enfant 1 — fond : #e74c3c, dimensions en %
• Enfant 2 — fond : #3498db, dimensions en %
• Enfant 3 — fond : #2ecc71, dimensions en %

✏️ Tâche 5

Le parent dépend de la fenêtre du navigateur, deux enfants sont en colonne. Estime les valeurs à l'œil :

• Estime les tailles à l'œil
• Parent — fond : #c0392b, largeur en vw, hauteur en vh
• Enfant 1 — fond : #f1c40f, dimensions en %
• Enfant 2 — fond : #9b59b6, dimensions en %
• 💡 Essaie de changer la largeur de la fenêtre du navigateur — que se passe-t-il avec les blocs ?

✏️ Tâche 6

Le parent dépend de la fenêtre du navigateur, trois enfants sont en colonne. Estime les valeurs à l'œil :

• Estime les tailles à l'œil
• Parent — fond : #6c5ce7, largeur en vw, hauteur en vh
• Enfant 1 — fond : #e17055, dimensions en %
• Enfant 2 — fond : #00cec9, dimensions en %
• Enfant 3 — fond : #fdcb6e, dimensions en %

✏️ Tâche 7

Le parent dépend de la fenêtre du navigateur, l'enfant dépend du parent. Estime les valeurs à l'œil :

• Estime les tailles à l'œil
• Parent — fond : #00b894, largeur en vw, hauteur en vh
• Enfant — fond : #fd79a8, dimensions en %
• 💡 Le pourcentage de l'enfant est calculé par rapport à la taille du parent

✏️ Tâche 8

Le parent dépend de la fenêtre du navigateur, l'enfant dépend du parent. Estime les valeurs à l'œil :

• Estime les tailles à l'œil
• Parent — fond : #e17055, largeur en vw, hauteur en vh
• Enfant — fond : #0984e3, dimensions en %

✏️ Tâche 9

Trois niveaux : le parent dépend de la fenêtre, chaque enfant dépend de son propre parent. Estime les valeurs à l'œil :

• Estime les tailles à l'œil
• Bloc 1 (externe) — fond : #2c3e50, largeur en vw, hauteur en vh
• Bloc 2 (moyen) — fond : #e74c3c, dimensions en %
• Bloc 3 (interne) — fond : #f1c40f, dimensions en %
• 💡 Chaque % est calculé par rapport à son parent direct !

✏️ Tâche 10 — 🔥 Bonus

Trois blocs enfants sont en colonne à l'intérieur du parent. Estime les valeurs à l'œil :

• Estime les tailles à l'œil
• Parent — fond : #2c3e50, largeur en vw, hauteur en vh
• Enfant 1 — fond : #e74c3c, dimensions en %
• Enfant 2 — fond : #f39c12, dimensions en %
• Enfant 3 — fond : #2ecc71, dimensions en %

📌 Important :
Chaque classe est écrite séparément dans style.css.
Utilisez uniquement HTML et CSS.
Entraîne-toi sur les unités : %, vw, vh.