


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

Il est sorti! Félicitations à l'équipe Vue pour l'avoir fait, je sais que ce fut un effort massif et une longue période à venir. Tous les nouveaux documents aussi.

Je dirais que "Site Web" correspond mieux que "Application mobile" mais j'aime ce cadrage de Max Lynch:

J'ai eu quelqu'un qui écrivait avec cette question très légitime. Lea vient de bloguer sur la façon dont vous pouvez obtenir les propriétés CSS valides elles-mêmes du navigateur. C'est comme ça.

Si nous devons afficher la documentation à l'utilisateur directement dans l'éditeur WordPress, quelle est la meilleure façon de le faire?

L'autre jour, j'ai repéré ce morceau particulièrement charmant sur le site Web de Corey Ginnivan où une collection de cartes se cassent les uns sur les autres pendant que vous faites défiler.

Il existe un certain nombre de ces applications de bureau où l'objectif montre votre site à différentes dimensions en même temps. Vous pouvez donc, par exemple, écrire

CSS Grid est une collection de propriétés conçues pour faciliter la mise en page qu'elle ne l'a jamais été. Comme tout, il y a un peu une courbe d'apprentissage, mais Grid est

Je vois que Google Fonts a déployé un nouveau design (tweet). Comparé à la dernière grande refonte, cela semble beaucoup plus itératif. Je peux à peine faire la différence
