Maison > Article > interface Web > Comment utiliser les unités CSS Viewport vh et vw pour adapter la mise en page à différentes hauteurs d'écran
Comment utiliser les unités CSS Viewport vh et vw pour implémenter une mise en page qui s'adapte à différentes hauteurs d'écran
Avec la popularité des appareils mobiles, de nombreux sites Web et applications doivent s'afficher correctement sur différentes hauteurs d'écran. CSS fournit une gamme d'unités, parmi lesquelles les unités vh (hauteur de la fenêtre) et vw (largeur de la fenêtre) sont idéales pour adapter les mises en page à différentes hauteurs d'écran. Cet article explique comment utiliser ces deux unités et fournit des exemples de code spécifiques.
Tout d'abord, comprenons comment fonctionnent ces deux unités :
Ensuite, nous utiliserons ces deux unités pour mettre en œuvre une disposition qui s'adapte aux différentes hauteurs d'écran.
div { height: 50vh; }
De cette façon, lorsque l'élément div est placé sur un écran de hauteurs différentes, sa hauteur s'ajustera en conséquence.
.container { display: flex; align-items: center; justify-content: center; height: 100vh; } .element { width: 50%; }
Dans cet exemple, l'élément conteneur est configuré pour occuper toute la hauteur de la fenêtre (100vh) et utilise flexbox pour centrer ses enfants verticalement. La largeur de l'élément enfant est définie sur 50 % de la largeur de la fenêtre.
h1 { font-size: 5vw; }
Ici, la taille de la police de l'élément h1 sera automatiquement ajustée en fonction de la largeur de la fenêtre d'affichage. Sur les écrans plus petits, la taille de la police sera réduite, tandis que sur les écrans plus grands, la taille de la police sera plus grande.
Résumé :
En utilisant les unités de fenêtre CSS vh et vw, nous pouvons facilement implémenter des mises en page qui s'adaptent à différentes hauteurs d'écran. En définissant la hauteur des éléments, la taille des polices et en utilisant des techniques de mise en page telles que flexbox, nous pouvons garantir que nos sites Web et nos applications s'affichent correctement sur différents appareils. Les fonctionnalités et la flexibilité de ces unités en font des outils puissants pour une conception réactive.
J'espère que cet article vous aidera à comprendre comment utiliser les unités de fenêtre CSS vh et vw pour implémenter des mises en page qui s'adaptent à différentes hauteurs d'écran. En utilisant ces unités, vous pouvez facilement créer des conceptions Web uniques et élégantes qui fonctionnent sur une variété d'appareils.
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!