VW vs VH vs % : Quand devriez-vous utiliser les unités relatives à la fenêtre en CSS ?

Comprendre vh/vw vs. % : un guide des unités relatives à la fenêtre d'affichage en CSS

Alors que les unités % mesurent le pourcentage d'un élément par rapport à son conteneur parent, les unités vw et vh sont spécifiquement conçues pour mesurer respectivement le pourcentage de la hauteur et de la largeur de la fenêtre. Cette distinction devient critique lorsque le conteneur parent de l'élément n'est pas la fenêtre elle-même.

Dans les cas où la hauteur ou la largeur du conteneur parent est dynamique ou diffère de la fenêtre d'affichage, les unités vw et vh garantissent un dimensionnement cohérent. Par exemple, si un élément est défini sur une hauteur de 100 % dans un div parent mesurant 1 000 px de haut, sa hauteur réelle peut varier en fonction de la taille de la fenêtre d'affichage.

À l'inverse, définir le même élément sur 100vh garantirait qu'il sera toujours occupe 100 % de la hauteur de la fenêtre, quelles que soient les dimensions du div parent. Cela élimine le risque de dimensionnement incohérent dans la conception Web réactive.

Pour illustrer cette différence, considérons l'exemple de code suivant :

body,
html {
    height: 100%;
}

.parent {
    background: lightblue;
    float: left;
    height: 200px;
    padding: 10px;
    width: 50px;
}

.child {
    background: pink;
    height: 100%;
    width: 100%;
}

.viewport-height {
    background: gray;
    float: right;
    height: 100vh;
    width: 50px;
}

Dans cet exemple, le div enfant au sein du div parent sera avoir une hauteur qui correspond à 100 % de la hauteur du div parent (200 px). Cependant, le div viewport-height aura toujours une hauteur égale à 100 % de la hauteur de la fenêtre d'affichage, même si la hauteur du div parent devait changer.

Par conséquent, les unités vw et vh offrent un contrôle plus précis sur le dimensionnement des éléments dans par rapport à la fenêtre d'affichage, ce qui les rend particulièrement utiles pour créer des mises en page Web réactives qui s'adaptent parfaitement aux différentes tailles d'écran et formats d'image.

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!