Unités de fenêtre CSS : unités CSS *vh (dvh, lvh, svh) et *vw

Les unités de fenêtre CSS sont essentielles pour créer des mises en page réactives qui s'adaptent à différentes tailles d'écran. Ces unités mesurent les dimensions par rapport à la hauteur et à la largeur de la fenêtre, permettant aux développeurs de concevoir des interfaces Web flexibles et adaptables. Ce guide couvrira les unités vh et vw traditionnelles et présentera des unités plus récentes telles que dvh, lvh et svh, expliquant comment elles améliorent la réactivité et gèrent plus efficacement les changements de fenêtre.

1. Que sont les unités de fenêtre en CSS ?

Les unités de fenêtre sont des unités relatives qui s'ajustent dynamiquement à la taille de la fenêtre d'affichage du navigateur. Les plus couramment utilisés sont :

• vh : 1 % de la hauteur de la fenêtre.
• vw : 1 % de la largeur de la fenêtre.

Ces unités facilitent la conception d'éléments qui s'adaptent à la taille de la fenêtre du navigateur. Par exemple :

div {
  width: 50vw; /* 50% of the viewport width */
  height: 100vh; /* 100% of the viewport height */
  background-color: lightblue;
}

Dans cet exemple, le div s'étend sur la moitié de la largeur et sur toute la hauteur de la fenêtre.

2. Limites des vh et vw traditionnels

Bien que vh et vw fonctionnent bien dans la plupart des scénarios, ils ne tiennent pas compte de certains changements dynamiques dans la fenêtre d'affichage, tels que :

• L'apparence de la barre d'adresse du navigateur ou des commandes de navigation sur les appareils mobiles.
• Modifications déclenchées par l'orientation de l'appareil ou le redimensionnement de la fenêtre du navigateur.

Ces limitations peuvent rendre les conceptions incohérentes ou entraîner des problèmes de mise en page involontaires, en particulier sur mobile.

3. Les nouvelles unités de fenêtre : dvh, lvh et svh

Pour résoudre ces problèmes, CSS a introduit trois nouvelles unités : dvh (Dynamic Viewport Height), lvh (Large Viewport Height) et svh (Small Viewport Height).

Hauteur de la fenêtre dynamique (dvh)

dvh s'adapte dynamiquement aux changements dans la fenêtre d'affichage, tels que l'apparition ou la disparition d'éléments de l'interface utilisateur du navigateur. Il représente 1 % de la hauteur actuelle de la fenêtre, garantissant ainsi que votre mise en page s'adapte en temps réel.

Exemple :

div {
  height: 100dvh; /* Adjusts dynamically to visible viewport height */
  background-color: lightgreen;
}

Cela garantit que le div s'adapte toujours à la zone visible, même lorsque l'interface utilisateur du navigateur change.

Hauteur de la grande fenêtre (lvh)

lvh représente 1 % de la plus grande hauteur de fenêtre d'affichage possible, en ignorant les modifications dynamiques de l'interface utilisateur (comme les barres d'adresse mobiles).

Exemple :

div {
  height: 100lvh; /* Fixed to the maximum viewport height */
  background-color: lightcoral;
}

Ceci est utile pour les mises en page qui doivent maintenir la cohérence, quelles que soient les modifications de l'interface utilisateur du navigateur.

Hauteur de la petite fenêtre (svh)

svh représente 1 % de la plus petite hauteur de fenêtre d'affichage possible, s'adaptant aux scénarios dans lesquels l'interface utilisateur du navigateur occupe une partie importante de l'écran.

Exemple :

div {
  width: 50vw; /* 50% of the viewport width */
  height: 100vh; /* 100% of the viewport height */
  background-color: lightblue;
}

Cette unité est particulièrement utile lorsqu'il s'agit d'appareils sur lesquels des éléments d'interface utilisateur tels que les fenêtres contextuelles du clavier peuvent réduire la zone visible.

4. Largeur de la fenêtre (vw)

vw mesure 1 % de la largeur de la fenêtre. Il reste cohérent et n'est pas affecté par les changements dynamiques tels que le défilement ou l'apparence de l'interface utilisateur.

Exemple :

div {
  height: 100dvh; /* Adjusts dynamically to visible viewport height */
  background-color: lightgreen;
}

C'est idéal pour les mises en page horizontales ou les conceptions pleine largeur.

5. Cas d'utilisation pratiques

Voici comment ces unités peuvent être appliquées dans des scénarios réels :

Section Héros Responsive

div {
  height: 100lvh; /* Fixed to the maximum viewport height */
  background-color: lightcoral;
}

Cela garantit que la section des héros s'adapte toujours à l'écran, même lorsque les barres d'adresse mobiles se cachent ou apparaissent.

Modaux pleine page

div {
  height: 100svh; /* Adjusts to the smallest viewport height */
  background-color: lightgoldenrodyellow;
}

L'utilisation de svh garantit que le modal reste utilisable même lorsque le clavier à l'écran réduit la hauteur de la fenêtre.

Pied de page collant

div {
  width: 100vw; /* Full viewport width */
  background-color: lightpink;
}

Un pied de page collant qui conserve sa taille sur différents appareils.

6. Combiner des unités pour une flexibilité maximale

Vous pouvez mélanger et assortir ces unités pour des conceptions plus adaptatives. Par exemple :

.hero {
  height: 100dvh; /* Ensures the hero fits the visible viewport */
  width: 100vw;
  background: url('hero.jpg') no-repeat center center/cover;
}

Cette approche garantit que la conception s'adapte à tous les scénarios de fenêtres d'affichage possibles.

7. Prise en charge du navigateur

Bien que vh et vw soient largement pris en charge dans tous les navigateurs, dvh, lvh et svh sont des ajouts plus récents. Assurez-vous de vérifier la compatibilité des navigateurs et de fournir des solutions de secours pour les anciens navigateurs.

Exemple de secours :

.modal {
  height: 100svh; /* Accounts for the smallest viewport height */
  width: 100vw;
  overflow-y: auto; /* Allows scrolling if needed */
  background-color: white;
}

8. Conclusion

Les unités de fenêtre CSS telles que vh, vw, dvh, lvh et svh sont des outils puissants pour créer des conceptions Web réactives et adaptables. Alors que vh et vw gèrent la plupart des cas, les nouvelles unités dvh, lvh et svh répondent aux limitations, en particulier sur les appareils mobiles. En comprenant et en exploitant ces unités, les développeurs d'applications mobiles peuvent créer des conceptions transparentes et conviviales qui fonctionnent sur tous les appareils et tous les scénarios.

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!