


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!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds











Essayons de savoir un terme ici: "fournisseur de formulaire statique". Vous apportez votre HTML

Au début d'un nouveau projet, la compilation SASS se produit en un clin d'œil. Cela se sent bien, surtout quand il est associé à BrowSersync, qui recharge

Dans cette semaine, le Roundup des nouvelles de la plate-forme, Chrome présente un nouvel attribut pour le chargement, les spécifications d'accessibilité pour les développeurs Web et la BBC Moves

C'est moi qui regarde l'élément HTML pour la première fois. J'en ai été conscient depuis un certain temps, mais il ne l'a pas encore pris pour un tour. Il a un peu cool et

L'achat ou la construction est un débat classique de la technologie. Construire des choses vous-même peut être moins cher car il n'y a pas d'article de ligne sur votre facture de carte de crédit, mais

Pendant un certain temps, iTunes était le grand chien du podcasting, donc si vous avez lié "Abonnez-vous au podcast" pour aimer:

Le chef de document n'est peut-être pas la partie la plus glamour d'un site Web, mais ce qui y va est sans doute tout aussi important pour le succès de votre site Web que son

Il existe de nombreuses plates-formes d'analyse pour vous aider à suivre les données des visiteurs et d'utilisation sur vos sites. Peut-être plus particulièrement Google Analytics, qui est largement utilisé
