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

La différence entre vh/vw et % en unités CSS

Les unités CSS telles que vh et vw offrent aux développeurs des options polyvalentes pour définir un élément dimensions par rapport à la fenêtre. Cependant, leurs similitudes avec l'unité % plus traditionnelle peuvent soulever des questions sur leur caractère distinctif.

Comprendre vh et vw

vh (hauteur de la fenêtre) et vw (largeur de la fenêtre) sont des unités qui représentent respectivement un pourcentage de la hauteur et de la largeur de la zone de visualisation. Par exemple, 100vw signifie 100 % de la largeur de la fenêtre d'affichage, quelle que soit la taille réelle de l'écran de l'appareil.

Comparaison avec %

À première vue, les unités vh/vw semblent redondant puisque % représente également un pourcentage de certains éléments parents. Cependant, la distinction clé réside dans le cadre de référence.

Hauteur par rapport à la hauteur de la fenêtre

L'unité % mesure généralement une dimension par rapport à la hauteur de son élément parent. . Par exemple, un élément enfant avec une hauteur de 100 % occuperait toute la hauteur de son parent, quelle que soit la taille de la fenêtre.

En revanche, les unités vh et vw mesurent les dimensions par rapport à la hauteur et à la largeur de la fenêtre. Cela signifie qu'un élément 100vh occupera toujours 100 % de la hauteur de la fenêtre, quelle que soit la taille de son élément parent.

Exemple

Considérons un élément div parent avec une hauteur de 200px et un élément div enfant défini à 100% de hauteur. Alors que 100 % signifie généralement "100 % du parent", dans ce cas, le div enfant pourrait potentiellement s'étendre au-delà de la hauteur de la fenêtre d'affichage.

Cependant, si le div enfant est défini sur 100vh, il occupera toujours 100 % de la hauteur de la fenêtre, garantissant une mise en page entièrement réactive et cohérente sur différentes tailles de fenêtre.

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!