Unités viewport

Les unités viewport dimensionnent les éléments par rapport au viewport du navigateur, et non à un parent ou à la police racine. 1vw vaut 1 % de la largeur du viewport et 1vh vaut 1 % de sa hauteur, si bien qu'un élément dimensionné en unités viewport s'adapte en continu quand l'écran change. Elles alimentent les sections pleine hauteur, la typographie fluide et les mises en page qui s'adaptent sans point de rupture.

Les principales unités

Le problème du viewport mobile

Sur téléphone, la barre d'adresse apparaît et disparaît au défilement, si bien que le classique 100vh peut dépasser la zone visible et provoquer un saut. Les unités récentes corrigent cela : svh (petit), lvh (grand) et dvh (dynamique) suivent le vrai viewport, et 100dvh est désormais la façon sûre de faire remplir l'écran mobile à une section.

Usages courants

• Sections héro pleine hauteur avec min-height: 100dvh.
• Typographie fluide, en général dans clamp() pour qu'elle ne soit ni trop petite ni trop grande.
• Espacements et visuels qui s'adaptent à l'écran.

Unités viewport, pourcentages ou rem

Un pourcentage est relatif au parent, rem à la taille de police racine, et une unité viewport à l'écran. Utilisez les pourcentages pour la mise en page dans un conteneur, rem pour un texte et des espacements accessibles, et les unités viewport quand un élément doit s'adapter à tout l'écran.

Pièges et bonnes pratiques

100vw peut être légèrement plus large que la zone visible quand une barre de défilement est présente, provoquant un débordement horizontal : préférez 100% pour les blocs pleine largeur. Évitez de dimensionner le texte courant en vw pur car cela peut casser le zoom et l'accessibilité ; enveloppez-le dans clamp() avec un plancher en rem.

Les unités viewport chez BeBranded

Chez BeBranded, nous utilisons les unités viewport pour des héros et un texte fluides qui s'adaptent proprement, toujours protégés pour le mobile et l'accessibilité. Cela fait partie du savoir-faire responsive de notre travail de design.