Guide des unités de visualisation CSS vw, vh, vmin, vmax

Viewport-longueurs en pourcentage, ou unités de la fenêtre comme on les appelle plus souvent, sont des unités CSS réactives qui vous permettent de définir des dimensions en pourcentage de la largeur ou de la longueur de la fenêtre. Les unités de fenêtre de visualisation peuvent être très utiles dans les cas où d'autres unités CSS réactives, telles que des pourcentages, sont utilisées. difficile de faire le travail.

Bien que Documentation du W3C sur les unités de visualisation contient tout ce qui peut être mis en théorie, ce n’est pas très prolixe. Donc, dans cet article, nous verrons comment ces unités CSS travailler dans la pratique.

Hauteur de la fenêtre (vh) & largeur de la fenêtre d'affichage (vw)

W3C définit la fenêtre comme “taille du bloc contenant initial”. En d'autres termes, viewport est la zone contenu dans la fenêtre du navigateur ou toute autre zone de visualisation sur un écran.

le vw et vh des unités stand pour le pourcentage de la largeur et de la hauteur de la fenêtre d'affichage. Ils peuvent prendre une valeur entre 0 et 100 selon les règles suivantes:

 100vw = 100% de la largeur de la fenêtre 1vw = 1% de la largeur de la fenêtre 100vh = 100% de la hauteur de la fenêtre 1vh = 1% de la hauteur de la fenêtre 

Différences en unités de pourcentage

Alors, en quoi les unités de la fenêtre de visualisation sont-elles différentes des unités de pourcentage? Unités de pourcentage hériter de la taille de leur élément parent tandis que les unités de la fenêtre d'affichage ne le sont pas. Les unités de fenêtre sont toujours calculées en tant que pourcentage de la taille de la fenêtre. En conséquence, un élément défini par les unités de la fenêtre peut dépasser la taille de son parent..

Exemple: sections en plein écran

Sections plein écran sont probablement les cas d'utilisation les plus connus des unités de viewport.

le HTML est assez simple; nous avons juste trois sections l'une sous l'autre et nous voulons que chacun d'entre eux couvrir tout l'écran (Mais pas plus).

En CSS, on utilise 100vh comme un la taille valeur et 100% comme largeur. Nous n'utilisons pas le vw unité ici comme par défaut, Les barres de défilement sont également ajoutées à la taille de la fenêtre. Donc, si on utilisait le largeur: 100vw; règle un barre de défilement horizontale apparaîtrait à la bas de la fenêtre du navigateur.

 * marge: 0; rembourrage: 0;  section background-size: cover; position de fond: centre; largeur: 100%; hauteur: 100vh;  .section-1 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg');  .section-2 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg');  .section-3 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg');  

Sur la démo gif ci-dessous, vous pouvez voir que vh est vraiment une unité réactive.

Selon la documentation du W3C, les informations susmentionnées question de la barre de défilement horizontale peut être résolu en ajoutant le débordement: auto; règle à l'élément racine. Cette solution ne fonctionne que partiellement, bien que. La barre de défilement horizontale, en effet, disparaît mais largeur est toujours calculé en fonction de la largeur de la fenêtre (la barre latérale est incluse), donc les éléments seront légèrement plus grands qu’ils ne devraient l’être.

Je dirais que je n'oserais pas utiliser le vw unité sur dimensionnement des éléments en plein écran à cause de cette raison. Nous n'en avons même pas besoin, car largeur: 100%; règle fonctionne parfaitement. Avec les dispositions en plein écran, le véritable défi a toujours été de savoir comment définir une valeur de hauteur appropriée et le vh l'unité donne une solution brillante pour cette.

Autres cas d'utilisation

Si tu es interessé par autres cas d'utilisation vw et vh Lullabot a un excellent article qui énumère un poignée d'exemples concrets (avec les démos Codepen), tels que:

• Cartes à ratio fixe.
• Garder un élément plus court que l'écran.
• Mise à l'échelle du texte.
• Sortir du conteneur.

Opera.dev propose également un court tutoriel sur la manière de tirer parti de la vw unité en créer une typographie sensible.

Vous ne pouvez pas utiliser uniquement les unités de la fenêtre d'affichage largeur et la taille propriétés, mais sur un autre. Par exemple, vous pouvez définir la taille des rembourrages et des marges en utilisant le vw et vh unités, aussi.

Fenêtre d'affichage min (vmin) & viewport max (vmax)

le vmin et vmax unités vous permettent d'accéder à la taille du petit ou du grand côté de la fenêtre d'affichage, selon les règles suivantes:

 100vmin = 100vw ou 100vh, selon le plus petit 1vmin = 1vw ou 1vh, selon le plus petit 100vmax = 100vw ou 100vh, selon le plus grand 1vmax = 1vw ou 1vh, le plus grand 

Donc, en cas de orientation portrait, 100vmin est égal à 100vw, comme la fenêtre est plus petit horizontalement que verticalement. Pour la même raison, 100vmax sera égal à 100vh.

De même, en cas de orientation paysage, 100vmin est égal à 100vh, comme la fenêtre est plus petit verticalement qu'horizontalement. Et bien sur, 100vmax sera égal à 100vw ici.

Exemple: Rendre les textes de héros lisibles sur tous les écrans

le vmin et vmax les unités sont beaucoup moins connues que vw et vh. Cependant, ils peuvent parfaitement être utilisés comme substitut à l'orientation @médias des requêtes. Par exemple, vmin et vmax peut être utile lorsque vous avez des éléments qui peuvent paraître étranges à différents formats.

Le nouveau code contient un excellent tutoriel dans lequel ils expliquent comment vous pouvez garder le texte du héros lisible sur chaque écran, en utilisant le vmin unité. Textes de héros sont enclins à regarder trop petit sur le mobile et trop grand sur les grands moniteurs.

Voici l’idée principale de leur solution:

 h1 taille de la police: 20vmin; font-family: Avenir, sans-serif; poids de police: 900; text-align: center;  

Dans la démo de Codepen, vous pouvez vérifier comment vmin résout le problème de lisibilité des textes de héros. Accéder au “Page entière” voir sur Codepen, puis redimensionner la fenêtre de votre navigateur horizontalement et verticalement pour voir comment le texte du héros change.

Support du navigateur

Comme vous pouvez le voir sur le tableau CanIUse ci-dessous, la prise en charge du navigateur est relativement bonne pour les unités de la fenêtre. Cependant, gardez à l'esprit que certaines versions d'IE et Edge ne prennent pas en charge vmax. En outre, iOS 6 et 7 ont un problème avec le vh unité, qui a été corrigé dans iOS 8.