Quelle est la différence entre « width : 100 % » et « width : 100vw » pour une conception Web réactive ?

Clarifier « Largeur : 100 % » par rapport à « largeur : 100vw »

Lorsque vous essayez d'adapter une iframe à la hauteur d'un écran, il est courant de recourir à l'utilisation "100vh" car "width:100%" ne s'affiche pas parfaitement, laissant un centimètre d'espace supplémentaire sur le côté droit dans Chrome sur un ordinateur portable. Cependant, pour comprendre cet écart, examinons la véritable signification de « largeur : 100vw » et « largeur : 100 %.

Comprendre vw et vh

"vw" et "vh" représentent respectivement la « largeur de la fenêtre » et la « hauteur de la fenêtre ». La fenêtre d'affichage fait référence à la zone visible d'un document ou d'une page sur l'écran d'un appareil.

La distinction entre "width:100%" et "width:100vw"

"Width:100%" fait un élément occupe tout l’espace disponible dans son conteneur. D'un autre côté, "width:100vw" définit la largeur de l'élément sur la largeur exacte de la fenêtre d'affichage, y compris la marge du document.

Cela signifie que si la marge du document est différente de zéro, l'élément rendu avec "width : 100vw" aura une largeur légèrement inférieure à celle rendue avec "width:100%". La définition de "body { margin: 0 }" éliminera cette différence.

Avantages supplémentaires de "vw" et "vh"

Au-delà de la limitation mentionnée ci-dessus, l'utilisation de "vw" et "vh" " Les unités offrent plusieurs avantages :

• Mise à l'échelle proportionnelle : Définition de tous les éléments du site Web, y compris la police les tailles et les hauteurs, en unités "vw", garantissent une mise à l'échelle proportionnelle en fonction de la largeur de la fenêtre d'affichage de l'appareil.
• Réactivité de l'appareil : L'utilisation de "1vw" pour la taille de la police (ou une alternative appropriée) le rend sans effort pour garantir un affichage cohérent sur les ordinateurs de bureau et les appareils mobiles.
• Compatibilité du framework : Les frameworks comme Bootstrap utilisent des unités « rem », qui fonctionnent de manière transparente avec « vw » et « vh » pour une intégration facile dans les projets existants.

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!