Unités de fenêtre d’affichage : vw, vh, dvh
Dimensionnez les éléments par rapport à la fenêtre d’affichage du navigateur avec les unités vw, vh et dvh modernes.
Unités de fenêtre d’affichage : vw, vh, dvh est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Que sont les unités de la fenêtre d'affichage ?
Les unités de la fenêtre d'affichage sont relatives à la taille de la fenêtre d'affichage du navigateur (la zone visible de la fenêtre du navigateur). Elles permettent de créer des mises en page et une typographie qui s'adaptent à l'espace disponible à l'écran.
vw — Largeur de la fenêtre d'affichage
1vw = 1 % de la largeur de la fenêtre d'affichage. 100vw remplit toute la largeur de la fenêtre d'affichage. Cette unité est utile pour les éléments pleine largeur sans les complications liées aux pourcentages.
<div class="hero"></div>
vh — Hauteur de la fenêtre d'affichage
1vh = 1 % de la hauteur de la fenêtre d'affichage. 100vh remplit toute la hauteur de la fenêtre d'affichage. Cette unité est classique pour les sections hero et les fenêtres modales en plein écran.
<div class="fullscreen">100vh fills the viewport height</div>
Le problème de 100vh sur mobile
Sur les navigateurs mobiles, la hauteur de la fenêtre d'affichage change lorsque l'interface du navigateur (la barre d'adresse) s'affiche ou se masque pendant le défilement. 100vh peut inclure ou exclure les éléments d'interface du navigateur de manière incohérente, ce qui peut masquer partiellement le contenu.
dvh — Hauteur dynamique de la fenêtre d'affichage
dvh (hauteur dynamique de la fenêtre d'affichage) se met à jour dynamiquement pour refléter la hauteur réellement visible après l'ajustement de l'interface du navigateur. Cette unité résout le problème de 100vh sur mobile.
<div class="mobile-hero">Dynamic viewport height (100dvh)</div>
svh et lvh
CSS fournit également svh (hauteur de la petite fenêtre d'affichage : exclut toujours l'interface du navigateur) et lvh (hauteur de la grande fenêtre d'affichage : comme si l'interface était masquée). Ces unités permettent de contrôler précisément le comportement de la fenêtre d'affichage sur mobile.
Typographie fluide avec vw
Utiliser vw pour la taille de police crée un texte qui s'adapte à la taille de l'écran :
<h1>Fluid Heading</h1>
Limites de la largeur de la fenêtre d'affichage
100vw inclut la largeur de la barre de défilement sur les ordinateurs de bureau. Cela provoque un débordement horizontal en cas d'utilisation imprudente. Préférez width: 100% sur les éléments de type bloc et réservez vw à des cas spécifiques.
vmin et vmax
1vmin = 1 % de la plus petite dimension de la fenêtre d'affichage (largeur ou hauteur). 1vmax = 1 % de la plus grande. Ces unités sont utiles pour les conteneurs carrés qui s'adaptent aux changements d'orientation.
<div class="square"></div>
svw, lvw, dvw — Variantes de largeur
Comme pour la hauteur, CSS fournit svw, lvw et dvw pour la largeur. Les variantes dynamiques (dvw, dvh) sont les plus utiles sur mobile.
Modèles pratiques
Modèles courants utilisant les unités de la fenêtre d'affichage :
min-height: 100dvh— sections plein écran adaptées aux mobilesheight: 100svh— panneaux d'interface fixesfont-size: clamp(1rem, 2.5vw, 2rem)— titres fluideswidth: min(800px, 90vw)— conteneurs à largeur sûre
Vérification rapide
Pourquoi dvh est-elle préférable à vh pour les sections mobiles en plein écran ?
Récapitulatif
vw et vh représentent 1 % de la largeur ou de la hauteur de la fenêtre d'affichage. Sur mobile, vh n'est pas fiable en raison des éléments d'interface du navigateur. Utilisez dvh pour les mises en page dynamiques en plein écran, adaptées aux dimensions réelles des mobiles. vmin et vmax réagissent à la plus petite ou à la plus grande dimension de la fenêtre d'affichage.
Questions Fréquemment Posées
La leçon « Unités de fenêtre d’affichage : vw, vh, dvh » est-elle gratuite ?
Oui — le texte complet de « Unités de fenêtre d’affichage : vw, vh, dvh » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Unités de fenêtre d’affichage : vw, vh, dvh » ?
Dimensionnez les éléments par rapport à la fenêtre d’affichage du navigateur avec les unités vw, vh et dvh modernes. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Unités de fenêtre d’affichage : vw, vh, dvh » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Unités absolues : px, pt, cm
- Unités relatives : em et rem
- Unités de fenêtre d’affichage : vw, vh, dvh
- Fonctions Min, Max et Clamp