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 :

• vh (hauteur de la fenêtre) : Cette unité représente le pourcentage de la hauteur de la fenêtre. 1vh est égal à 1 % de la hauteur de la fenêtre.
• vw (largeur de la fenêtre) : Cette unité représente le pourcentage de la largeur de la fenêtre. 1vw est égal à 1 % de la largeur de la fenêtre.

Ensuite, nous utiliserons ces deux unités pour mettre en œuvre une disposition qui s'adapte aux différentes hauteurs d'écran.

1. Définissez la hauteur d'un élément en utilisant les unités vh :
   Nous pouvons définir la hauteur d'un élément en utilisant les unités vh afin qu'il se redimensionne automatiquement en fonction de la hauteur de la fenêtre d'affichage. Par exemple, nous pouvons définir la hauteur d'un élément div à 50% de la hauteur de l'é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.

2. Utilisez les unités vh pour le centrage vertical :
   Nous pouvons également utiliser les unités vh pour réaliser le centrage vertical des éléments. Cet effet peut être facilement obtenu en utilisant une combinaison d'unités vh et de disposition flexbox. Par exemple, le code suivant centrera un élément verticalement :

.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.

3. Définir la taille de la police à l'aide des unités VW :
   Une autre façon pratique d'utiliser les unités VW consiste à définir la taille de la police. En définissant la taille de la police en pourcentage de la largeur de la fenêtre, nous garantissons que la police a une taille cohérente sur différents écrans. Voici un exemple :

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!