Quelle est la principale différence entre les unités CSS `vh`/`vw` et `%` ?

Unités CSS : explorer les différences entre vh/vw et %

Introduction

In Dans le domaine du style CSS, une large gamme d'unités peut être utilisée pour définir les dimensions des éléments. Parmi celles-ci, vh et vw sont des unités relativement nouvelles qui ont suscité une certaine confusion en raison de leurs similitudes perçues avec l'unité de pourcentage plus courante. Cet article explore la différence fondamentale entre ces unités pour faire la lumière sur leurs scénarios d'application uniques.

vh et vw : un pourcentage de la fenêtre

Comme le suggère la question, vh (hauteur de la fenêtre) et vw (largeur de la fenêtre) sont des unités qui mesurent respectivement le pourcentage de la hauteur et de la largeur de la fenêtre actuelle. Par exemple, 100vh représente 100 % de la hauteur de la fenêtre actuelle.

Unités de pourcentage (%) : par rapport aux éléments parents

Contrairement à vh et vw, les unités de pourcentage (%) exprime une valeur relative à la taille de l'élément parent. Cela signifie que 100 % de hauteur représentera toujours 100 % de la hauteur du parent de l'élément, quelle que soit la taille de la fenêtre d'affichage.

Le facteur distinctif clé : la dépendance de la fenêtre d'affichage

La différence cruciale entre vh/vw et % réside dans leur dépendance à l'égard de la fenêtre d'affichage. Les unités vh et vw sont conçues pour évoluer dynamiquement avec la fenêtre d'affichage, garantissant que les dimensions des éléments s'ajustent en conséquence à mesure que l'utilisateur redimensionne la fenêtre du navigateur ou navigue vers différents appareils.

Par exemple, définir la hauteur d'un élément sur 100vh garantira que il remplit toute la hauteur de la fenêtre, quelle que soit la résolution d'écran ou l'appareil spécifique. D'un autre côté, une hauteur de 100 % ne remplira que la hauteur de l'élément parent, laissant potentiellement un espace vide en dessous de l'élément si le parent a une hauteur inférieure à celle de la fenêtre d'affichage.

Exemple pratique

Considérez l'extrait de code HTML et CSS fourni :

<div class="parent">
    <div class="child">100% height (parent is 200px)</div>
</div>
<div class="viewport-height">100vh height</div>

body, html { height: 100%; }
.parent { height: 200px; }
.child { height: 100%; }
.viewport-height { height: 100vh; }

Dans ce scénario, définir le La taille de l'enfant à 100 % lui fera remplir toute la hauteur du div parent (200 px), laissant un espace vide en dessous. Cependant, définir la hauteur du div viewport-height sur 100vh le fera remplir toute la hauteur de la fenêtre d'affichage, quelle que soit la taille du parent ou la résolution de l'écran.

Conclusion

Bien que les unités vh/vw et % puissent sembler similaires en surface, leur dépendance sous-jacente à la fenêtre d'affichage les distingue. Les unités vh et vw sont particulièrement utiles pour créer des mises en page réactives qui s'adaptent parfaitement aux différentes tailles d'écran, garantissant ainsi une expérience utilisateur cohérente sur tous les appareils.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!