Unités de fenêtre CSS

Online Coding Courses for Kids

Les unités CSS Viewport existent depuis quelques années et, avec le temps, je les vois de plus en plus utilisées par les développeurs. Leur avantage consiste à nous fournir un moyen de dimensionner les choses de manière fluide et dynamique, sans avoir besoin d’utiliser JavaScript. En outre, il est facile de fournir une solution de rechange en cas d’échec.

Dans cet article, nous découvrirons les unités de fenêtre CSS et comment les utiliser, ainsi que des cas d’utilisation et des solutions aux problèmes courants. Commençons et creusons!

introduction

Selon le Spécification CSS, les unités de pourcentage de la fenêtre sont relatives à la taille du bloc contenant initial, qui est l’élément racine d’une page Web.

Les unités de la fenêtre sont les suivantes: vw, vh, vmin, et vmax.

Largeur de la fenêtre

le vw l’unité représente un pourcentage de la largeur de l’élément racine. Une vw est égal à 1% de la largeur de la fenêtre.

Nous avons un élément avec le CSS suivant:

.element {
    width: 50vw;
}

Lorsque la largeur de la fenêtre est 500px, le 50vw sera calculé comme suit:

largeur = 500 * 50% = 250px

Hauteur de la fenêtre

le vh l’unité représente un pourcentage de la hauteur de l’élément racine. Une vh est égal à 1% de la hauteur de la fenêtre.

Nous avons un élément avec le CSS suivant:

.element {
    height: 50vh;
}

Lorsque la hauteur de la fenêtre est 290px, le 70vh sera calculé comme suit:

hauteur = 290 * 70% = 202px

C’est ça. Passons à un autre type d’unités de fenêtre!

vmin Unité

le vmin représente la valeur du minimum de la largeur et de la hauteur de la fenêtre. Si la largeur de la fenêtre d’affichage est supérieure à sa hauteur, la valeur sera calculée en fonction de la hauteur.

Prenons l’exemple suivant.

Nous avons un mobile en mode paysage, et un élément a le vmin unité. Dans ce cas, la valeur sera calculée en fonction de la hauteur de la fenêtre, car elle est inférieure à la largeur.

.element {
    padding-top: 10vmin;
    padding-bottom: 10vmin;
{

Voici comment vmin sera calculé:

Comme vous pouvez le deviner, le résultat sera calculé comme suit:

padding-top = (10% de la hauteur) = 10% * 164 = 32px
padding-bottom = (10% de la hauteur) = 10% * 164 = 32px

vmax unité

C’est le contraire de vmin. La valeur est calculée en fonction de la largeur et de la hauteur maximales.

Prenons l’exemple suivant.

.element {
    padding-top: 10vmax;
    padding-bottom: 10vmax;
{

Le résultat sera calculé comme suit:

padding-top = (10% de la largeur) = 10% * 350 = 35px
padding-bottom = (10% de la largeur) = 10% * 350 = px

En quoi les unités de fenêtre sont-elles différentes des pourcentages?

Les unités de la fenêtre sont basées sur l’élément racine de la page, tandis que le pourcentage est basé sur le conteneur dans lequel elles se trouvent. Pour cette raison, elles sont différentes les unes des autres et chacune a ses cas d’utilisation.

Cas d’utilisation des unités de fenêtre

Dans les sections suivantes, j’explorerai certains cas d’utilisation des unités de fenêtre et comment les implémenter dans votre projet.

Taille de police

Les unités de fenêtre CSS sont parfaites pour une typographie réactive. Par exemple, nous pouvons utiliser ce qui suit pour un titre d’article:

.title {
    font-size: 5vw;
}

Le titre font-size augmentera ou diminuera en fonction de la largeur de la fenêtre. C’est comme donner une taille de police de 5% de la largeur de la fenêtre. Cependant, il pourrait être tentant de simplement l’utiliser sans test approprié. Voyons la vidéo ci-dessous:

Notez que la taille de la police est devenue très petite dans le dimensionnement mobile, ce qui est mauvais pour l’accessibilité et l’expérience utilisateur. Pour autant que je sache, la taille de police minimale sur un appareil mobile ne doit pas dépasser 14px. Dans le GIF, la taille de la police est passée en dessous 10px.

Pour résoudre ce problème, nous devons donner au titre un le minimum taille de police qu’il ne peut pas descendre en dessous. CSS calc() à la rescousse!

.title {
    font-size: calc(14px + 2vw);
}

le calc() La fonction CSS aura une base 14px valeur, et il ajoutera 2vw à elle. Avec cela en main, la valeur de la taille de la police ne deviendra pas trop petite.

Une autre chose importante à considérer est le comportement de la taille de police sur les grands écrans, par exemple un iMac 27 pouces. Que va-t-il se passer? Eh bien, vous l’avez deviné. La taille de la police est passée à environ 95px, dont une énorme valeur. Pour éviter cela, nous devons utiliser requêtes médias à certains points d’arrêt et changer la font-size.

@media (min-width: 1800px) {
    .title {
        font-size: 40px;
    }
}

En réinitialisant le font-size, nous pouvons être sûrs que la taille ne sera pas trop énorme. Vous devrez peut-être également ajouter plusieurs requêtes multimédias, mais cela dépend de vous et dépend du contexte de votre projet.

Démo

Sections plein écran

Parfois, nous avons besoin d’une section pour prendre 100% de la hauteur de la fenêtre. Ceci est connu comme ** sections plein écran **. Pour ce faire, nous pouvons utiliser l’unité de hauteur de la fenêtre.

.section {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

En ajoutant height: 100vh, nous pouvons nous assurer que la hauteur de la section occupera 100% de la fenêtre. En outre, j’ai ajouté une boîte flexible pour gérer le centrage du contenu horizontalement et verticalement.

Démo

Sur un grand écran, vous remarquerez peut-être que le contenu du site Web est court et que le pied de page n’est pas collé en bas. C’est normal et ce n’est pas considéré comme une mauvaise pratique. Cependant, il y a place à amélioration. Considérez la figure suivante qui représente le problème:

Pour résoudre ce problème, nous devons donner au contenu principal une hauteur égale à hauteur de la fenêtre – (en-tête + pied de page). Il est difficile de le faire de manière dynamique, mais avec les unités de fenêtre CSS, c’est assez facile.

1. Première solution: unités de calcul et de fenêtre

Si la hauteur de l’en-tête et du pied de page est fixe, il est possible de combiner la fonction CSS calc () avec les unités de la fenêtre. Voici comment:

header,
footer {
    height: 70px;
}

main {
    height: calc(100vh - 70px - 70px);
}

Cette solution n’est pas garantie de fonctionner tout le temps, en particulier pour le pied de page. Dans ma carrière, je n’ai pas utilisé de pied de page à hauteur fixe, car il n’est pas réalisable, par exemple, sur différentes tailles d’écran.

En ajoutant le 100vh comme hauteur pour l’élément de corps, nous pouvons ensuite utiliser flexbox pour que l’élément principal occupe l’espace restant.

body {
    min-height: 100vh;
    display: flex
    flex-direction: column;
{

main {
    /* This will make the main element take the remaining space dynamically */
    flex-grow: 1;
}

Avec cela, le problème est résolu et nous avons un pied de page collant quelle que soit la longueur du contenu.

Démo

Éléments réactifs

Je suis tombé sur cette article tout en recherchant, et je l’ai vraiment aimé, donc je vais reprendre le cas d’utilisation et l’expliquer à ma façon.

Supposons que nous ayons un portefeuille pour présenter notre travail de conception réactive et que nous ayons trois appareils (mobile, tablette et ordinateur portable). Chaque appareil contient une image. Le but est de rendre ce 100% responsive en CSS.

En utilisant la grille CSS et les unités de fenêtre, nous pouvons rendre cela entièrement réactif et dynamique.

 class="wrapper">
   class="device laptop">
class="device mobile">
class="device tablet">

Notez que les unités de fenêtre sont utilisées dans le grid-* Propriétés. Ils sont également utilisés pour le border, border-radiuset d’autres propriétés. Tout cela se traduira par une conception fluide.

.wrapper {
  display: grid;
  grid-template-columns: repeat(20, 5vw); 
  grid-auto-rows: 6vw;
}

.mobile { 
  position: relative;
  z-index: 1;
  grid-column: 2 / span 3;
  grid-row: 3 / span 5;
}
 
.tablet {
  position: relative;
  z-index: 1;
  grid-column: 13 / span 7; 
  grid-row: 4 / span 4;
  border-bottom: 1vw solid #a9B9dd;
  border-right: solid 3vw #a9B9dd;
}
 
.laptop {
  position: relative;
  grid-column: 3/span 13;
  grid-row: 2 / span 8;
}

/* Viewport units are used for the bottom, left, right, height, and border-radius. Isn't that cool? */
.laptop:after {
    content:"";
    position:absolute;
    bottom: -3vw;
    left: -5.5vw;
    right: -5.5vw;
    height: 3vw;
    background-color: #a9B9dd;
    border-radius: 0 0 1vw 1vw;
}

Démo

Sortir du conteneur

J’ai remarqué un cas d’utilisation qui convient le mieux aux mises en page éditoriales. Un élément enfant qui prend 100% de la largeur de la fenêtre, même si sa largeur parente est limitée. Considérez la figure ci-dessous:

Pour obtenir un effet similaire, nous pouvons utiliser des unités de fenêtre et certaines propriétés de positionnement. Voici le CSS:

.break-out {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

Décomposons-le pour que nous comprenions comment tout cela fonctionne petit à petit.

1. Ajout width: 100vw

L’étape la plus importante, qui donnera à l’image une largeur égale à 100% de la fenêtre d’affichage.

2. Ajout margin-left: -50vw

Pour centrer l’image, nous devons lui donner une marge négative avec la moitié de la largeur de la fenêtre d’affichage.

3. Ajout left: 50%

Enfin, nous devrons pousser l’image vers la droite avec une valeur de 50% de sa largeur parente.

Démo

Espacement vertical et horizontal

Un autre cas d’utilisation intéressant auquel j’ai pensé est d’utiliser des unités de fenêtre pour l’espacement entre les éléments. Cela peut être utilisé avec des valeurs comme margin, top, bottom, et grid-gap. Lorsqu’il est utilisé, l’espacement sera basé sur la largeur ou la hauteur de la fenêtre d’affichage, ce qui peut être utile pour rendre une mise en page plus dynamique.

Pour les modaux, nous devons les pousser du haut de la fenêtre. Souvent, je l’ai fait avec le top et j’utilise la valeur en pourcentage ou en pixels. Cependant, avec les unités de la fenêtre, nous pouvons ajouter un espacement qui peut changer en fonction de la hauteur de la fenêtre.

.modal-body {
    top: 20vh;
}

Voir la vidéo ci-dessous pour le résultat final.

Démo

Un en-tête de page est une section qui sert d’introduction à une page. Il a souvent un titre et une description, et parmi lesquels il y a soit une hauteur fixe, soit un rembourrage pour les bords supérieur et inférieur. Nous sommes intéressés par le rembourrage.

Par exemple, voici à quoi ressemble le CSS:

.page-header {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

@media (min-width: 800px) {
    .page-header {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

Le rembourrage vertical est petit sur mobile et il s’agrandit sur de plus grandes fenêtres. Qu’en est-il de l’utilisation des unités de fenêtre? Explorons cela.

.page-header {
    padding-top: 10vh;
    padding-bottom: 10vh;
}

.page-header h2 {
    margin-bottom: 1.5vh;
}

j’ai utilisé vh unité pour le remplissage de l’en-tête de page et la marge sous le titre. Remarquez comment l’espacement change!

Démo

Grille d’articles

Un autre cas d’utilisation pour l’espacement dynamique est une grille d’éléments. Il peut pour tout, comme une grille d’articles, une section de services .. etc. Pour notre cas, nous allons voir comment l’utiliser pour une grille d’articles.

En utilisant des unités de fenêtre à l’intérieur grid-gap, nous pouvons obtenir le résultat souhaité. Notez que j’ai utilisé CSS calc() fonctionner aussi. L’objectif d’utiliser calc() est d’avoir un espace de base vertical et horizontal.

.wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: calc(14px + 1vh) calc(14px + 0.5vw);
}

Démo

Cas d’utilisation de Vmin et Vmax

Lors de mes recherches sur les cas d’utilisation de ces deux valeurs, je n’ai rien trouvé d’autre que cette un de CSS-Tricks.

Le cas d’utilisation concerne le remplissage supérieur et inférieur d’un élément d’en-tête de page. Le rembourrage est souvent réduit lorsque la fenêtre est petite (mobile). En utilisant vmin, nous pouvons avoir un rembourrage supérieur et inférieur fluide basé sur la plus petite dimension de la fenêtre d’affichage (largeur ou hauteur).

.page-header {
    padding: 10vmin 1rem;
}

Démo

Il y a quatre ans, j’ai écrit un article sur les requêtes verticales des médias. Je veux faire la lumière sur ce sujet, car il est lié à cet article que vous lisez maintenant

Sections pleine hauteur en mode paysage

En utilisant des requêtes multimédias verticales, nous pouvons vérifier si le téléphone ou la tablette de l’utilisateur est en mode paysage. Si tel est le cas, il n’aura aucun sens d’avoir une section occupant toute la hauteur de la fenêtre en utilisant height: 100vh.

Pour résoudre ce problème, nous pouvons procéder comme suit:

@media (min-height: 400px) {
    .section {
        height: 100vh;
    }
}

Ou nous pouvons utiliser la requête de support d’orientation:

@media (orientation: landscape) {
    .section {
        height: 100vh;
    }
}

Ratio d’aspect

On peut utiliser vw pour créer des éléments réactifs qui conservent son rapport hauteur / largeur quelle que soit la taille de la fenêtre d’affichage. Explorons cela.

Nous devrons décider du format d’image dont nous avons besoin. Pour cet exemple, je vais utiliser 9/16.

section {
    /* 9/16 * 100 */
    height: 56.25vw;
}

Démo

Utilisation d’unités de fenêtre pour les éléments graphiques

Je ne sais pas si ma dénomination est correcte, mais j’espère que vous obtiendrez mon point de vue à partir des exemples visuels suivants.

Connaissez-vous cette bordure supérieure utilisée par la plupart des sites Web de nos jours? Surtout, sa couleur est la même que la couleur de la marque – ce qui donnera une certaine personnalité.

Supposons que la valeur initiale de la frontière soit 3px. Comment convertir cette valeur fixe en une fenêtre d’affichage? Eh bien, voici comment calculer la vw équivalent de celui-ci.

vw = (Valeur en pixels / largeur de la fenêtre d’affichage) * 100

La largeur de la fenêtre est utilisée pour estimer le rapport entre la valeur du pixel et la valeur souhaitée vw unité.

Pour notre exemple, voici comment la bordure supérieure a été ajoutée:

.header {
    border-top: 4px solid #8f7ebc;  
}

Dans mon cas, la largeur de la fenêtre d’affichage est 1440 (Ce n’est pas un numéro fixe, remplacez-le par le vôtre)

vw = (4/1440) * 100 = 0,277

.header {
    border-top: 0.277vw solid #8f7ebc;  
}

Encore mieux, nous pouvons utiliser une valeur de pixel de base, et l’unité de fenêtre peut être un ajout.

.header {
    border-top: calc(2px + 0.138vw) solid $color-main;
}

Numérotation des sections

Pour les éléments de section avec un compteur ou une icône, nous pouvons tirer parti de l’utilisation des unités de fenêtre. Voir la maquette ci-dessous:

Nous avons un cercle contenant un nombre et il y a du contenu textuel. Les deux doivent être dimensionnés de manière fluide avec les unités de fenêtre. Voyons comment!

/**
1. Using a fluid value for the flex, width, and height properties.
2. The line-height is used to center the text vertically
3. Font size
4. The spacing between the circle and the text
**/
.point:before {
    flex: 0 0 calc(24px + 4vw); /* [1] */
    width: calc(24px + 4vw); /* [1] */
    height: calc(24px + 4vw); /* [1] */
    line-height: calc(24px + 4vw); /* [2] */
    font-size: calc(14px + 1vw); /* [3] */
    margin-right: calc(10px + 0.5vw); /* [4] */
}

Démo

Observateur d’unités de fenêtre

J’ai créé un outil pour m’aider à vérifier les éléments de valeur calculés actuels avec les unités de la fenêtre. Considérez ce qui suit:

J’ai ajouté le nom et la propriété de la classe pour chaque élément, et lors du redimensionnement de la fenêtre, les valeurs sont mises à jour dynamiquement. C’est bien mieux que d’inspecter DevTools et d’aller sur le calculé pour chaque élément spécifique.

Essayez-le vous-même

Il existe un problème courant dans le mobile qui provoque un défilement, même si 100vh est utilisé. La raison en est que la hauteur de la barre d’adresse est visible. Louis Hoebregts a écrit un article à ce sujet avec une solution simple et facile.

.my-element {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}
// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

Démo

En utilisant 100vw Est un anti-modèle

Lors de l’utilisation 100vw pour donner à un élément toute la largeur de la fenêtre, les choses peuvent très bien fonctionner si vous êtes un utilisateur de Mac OS car la barre de défilement verticale est masquée par défaut, donc sa largeur est ajoutée à la largeur totale.

Cependant, sur une machine Windows, vous remarquerez un défilement horizontal dans la page, car la largeur de la barre de défilement est ajoutée à la largeur. Supposons que vous ayez ajouté ce qui suit:

.element {
    width: 100vw;
}

Sur les fenêtres, la largeur calculée du .element sera 100vw + 8.5px, où 8.5px est la largeur de la barre de défilement verticale. Ce n’est pas bien!

Pour autant que je sache, il n’y a pas de solution à cela si nous n’utilisons pas Javascript, et je ne le recommande pas. Il vaut mieux éviter 100vw et utiliser une alternative. Par exemple, nous pouvons utiliser la grille CSS pour faire sortir un élément de son conteneur, voir cette article sur Cloudfour.

Merci beaucoup à Chris Morgan et Kilian Valkhof pour m’avertir de ce problème.

L’accessibilité est importante

Lors de l’utilisation intensive d’unités de fenêtre dans un projet, comme pour construire une mise en page entière avec lui, l’accessibilité est importante.
Lorsqu’une mise en page est zoomée / dézoomée, les éléments avec des unités de fenêtre ne seront pas mis à l’échelle comme vous pouvez vous y attendre. Cela entraînera un problème pour les utilisateurs qui comptent sur le zoom pour naviguer sur le Web.

Selon cela tweeter par Sāra Soueidān, l’utilisation des unités de fenêtre uniquement pour le dimensionnement des polices est néfaste pour l’accessibilité. Il est préférable de les combiner avec des valeurs fixes, comme ci-dessous:

.title {
    font-size: calc(16px + .3vw);
}

..et ce sera bon d’y aller. Veuillez vous assurer que l’utilisation des unités de fenêtre convient à ce que vous faites et testez bien.

  • j’ai trouvé cette peu px à vw convertisseur qui pourrait vous aider dans votre projet.

Avez-vous un outil utile? Veuillez me le faire savoir à @ shadowed9

La fin

C’est une enveloppe. Vous avez un commentaire ou une suggestion? N’hésitez pas à me cingler @ shadowed9.


Close Menu