Vh/Vw vs % en CSS : quand devriez-vous utiliser des unités de fenêtre pour une conception réactive ?

Comparaison des unités vh/vw et % CSS

Lorsque l'on parle de conception réactive, il est essentiel de comprendre les différences entre les différentes unités CSS. Parmi eux, vh et vw sont apparus comme des outils précieux pour mettre à l'échelle des éléments par rapport aux dimensions de la fenêtre.

vh et vw : unités des dimensions de la fenêtre

vh représente le pourcentage de la hauteur de la fenêtre, tandis que vw représente le pourcentage de sa largeur. Ces unités permettent aux éléments de s'ajuster dynamiquement en fonction de l'espace disponible dans la fenêtre. Par exemple, un élément défini sur 50vh occupera 50 % de la hauteur de la fenêtre, quelle que soit la taille de la fenêtre.

Pourquoi introduire vh/vw lorsque % existe ?

Alors que % permet également un dimensionnement basé sur un pourcentage, vh/vw offrent une distinction cruciale : Ils définissent des pourcentages par rapport à la fenêtre en particulier. Cela élimine les incohérences potentielles lorsque les éléments imbriqués et leurs conteneurs parents ont des hauteurs différentes.

Exemple : Hauteur du parent par rapport à la hauteur de la fenêtre

Considérons l'exemple suivant :

.parent {
    height: 100px;
}

.child {
    height: 100%;
}

Dans ce scénario, l'élément enfant occupera 100 % de la hauteur de son conteneur parent, ce qui est 100px.

Maintenant, si nous ajustons le CSS ci-dessus pour utiliser vh :

.parent {
    height: 100px;
}

.child {
    height: 100vh;
}

La hauteur de l'élément enfant sera de 100 % de la hauteur de la fenêtre d'affichage, ce qui peut différer de la hauteur du conteneur parent. . Cette distinction est particulièrement importante pour les mises en page réactives où les éléments doivent être mis à l'échelle par rapport à l'ensemble de la fenêtre d'affichage.

Conclusion

Alors que % et vh/vw peuvent obtenir des résultats similaires dans certains scénarios , vh/vw offrent un avantage unique en référençant directement les dimensions de la fenêtre. Cela garantit que les éléments s'ajustent de manière cohérente, quelle que soit la taille de l'imbrication ou du conteneur, ce qui en fait des outils essentiels pour une conception Web réactive.

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!