VH vs VW vs % : quelle est la différence dans les unités CSS ?

Unités CSS : Plonger dans la distinction entre vh/vw et %

Alors que le pourcentage (%), une unité CSS courante, mesure le relatif par rapport au conteneur parent de l'élément, vh et vw présentent une perspective différente. vh (hauteur de la fenêtre) et vw (largeur de la fenêtre) se rapportent exclusivement à la hauteur et à la largeur de la fenêtre, respectivement.

Contrairement à l'unité %, vh et vw assurent une relation cohérente avec la fenêtre. Quelle que soit la taille de l'élément parent, 100vh et 100vw représentent toujours la hauteur et la largeur totales de la zone d'écran visible de l'utilisateur.

Considérez cet exemple : un div enfant avec une hauteur de 100 % dans un div parent de 200 px de haut ne le fera pas. remplissez nécessairement toute la fenêtre si la fenêtre est supérieure à 200 pixels. Cependant, régler sa hauteur sur 100vh garantit qu'il occupe toute la hauteur de la fenêtre.

Cette distinction devient particulièrement pertinente dans les mises en page fluides qui s'adaptent aux différentes tailles et orientations d'écran. vh et vw fournissent un moyen fiable de définir les dimensions des éléments par rapport à la fenêtre d'affichage de l'utilisateur, garantissant que les éléments conservent leurs relations proportionnelles et leur lisibilité sur tous les appareils.

En résumé, vh et vw diffèrent de l'unité % en ancrant les dimensions uniquement à la fenêtre d'affichage, offrant cohérence et réactivité en termes de dimensionnement et de mise en page. Cette différence permet aux développeurs Web de créer des sites Web qui s'adaptent parfaitement à diverses tailles d'écran et améliorent l'expérience utilisateur sur diverses plates-formes.

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!