L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Comment comprendre les unités de fenêtre en CSS
La fenêtre de visualisation des feuilles de style en cascade (CSS) est définie comme la zone visible sur un écran de fenêtre qui fait référence aux affichages des appareils. Cela fait quelques années que CSS a initialement introduit les unités de fenêtre d'affichage. Les unités de fenêtre vous permettent de dimensionner les éléments et les polices en proportion de la largeur ou de la hauteur totale de l'écran de l'utilisateur (la fenêtre). Une valeur d'unité de fenêtre change lorsque le navigateur est redimensionné, ce qui signifie qu'il s'agit en fait d'« unités de longueur réactives ». 19659004]Hauteur de la fenêtre (vh) : Cette unité dépend de la hauteur de la fenêtre. Une valeur de « 1vh » correspond à 1% de la hauteur de la fenêtre.
Ex : La valeur de « 1vh » sera de 10 pixels (px), et la valeur de « 10vh » sera de 100px si la fenêtre de visualisation est de 1200px de large et 1000px de haut.
- Largeur de la fenêtre (vw) : La largeur de la fenêtre est utilisée pour calculer cette unité. Une valeur de "1vw" correspond à 1% de la largeur de la fenêtre.
Ex : La valeur de "1vw" sera de 12px et la valeur de "10vw" sera de 120px si la fenêtre fait 1200px de large et 1000px élevé.
- Dimensions minimales de la fenêtre (vmin) : Cette unité est basée sur les dimensions réduites de la fenêtre. Si la hauteur de la fenêtre est inférieure à la largeur, « 1vmin » équivaut à 1 % de la hauteur de la fenêtre. De la même manière, si la largeur de la fenêtre est inférieure à la hauteur, la valeur de "1vmin" sera de 1 % de la largeur de la fenêtre.
Ex : Si la fenêtre mesure 1 200 pixels de large et 1 000 pixels de haut. La valeur de "1vmin" sera de 10px et la valeur de "10vmin" sera de 100px car la hauteur de la fenêtre est inférieure à sa largeur.
- Dimensions maximales de la fenêtre (vmax) : Cette unité est basée sur la plus grande de la fenêtre dimensions. Si la hauteur de la fenêtre est supérieure à la largeur, "1vmax" équivaut à un pour cent de la hauteur de la fenêtre. De la même manière, si la largeur de la fenêtre est supérieure à la hauteur, "1vmax" sera égal à 1% de la largeur de la fenêtre.
Ex : Si la fenêtre fait 1200px de large et 1000px de haut. La valeur de "1vmax" sera de 12px et la valeur de "10vmax" sera de 120px car la largeur de la fenêtre est plus grande que sa hauteur.
Regardons comment ces unités fonctionneront dans divers scénarios :
- La valeur de "10vw" sera de 120px et la valeur de "10vh" sera de 100px si la fenêtre d'affichage mesure 1200px de large et 1000px de haut. La valeur de "10vmax" sera de 120px et la valeur de "10vmin" sera de 100px car la largeur de la fenêtre d'affichage est plus grande que sa hauteur. , la valeur de "10vh" est de 120 pixels et la valeur de "10vw" est de 100 pixels. La valeur de 10vmax restera 120px, même si elle sera désormais décidée par la hauteur de la fenêtre. De même, la valeur de "10vmin" restera à 100px.
- Si vous redimensionnez la fenêtre du navigateur de sorte que la fenêtre d'affichage ait une largeur de 1000 pixels et une hauteur de 800 pixels, la valeur de "10vh : devient 80 pixels et la valeur de "10vw" devient 100 pixels. La valeur de "10vmax" deviendra 100px, et la valeur de "10vmin" deviendra 80px de la même manière.
Viewport Units vs. Percentage
Les unités de Viewport représentent une proportion de la taille de la viewport, ce qui signifie il peut sembler que donner des tailles en pourcentage est identique à première vue. Les unités de la fenêtre sont toujours un pourcentage de la taille globale de la fenêtre, mais une valeur de pourcentage appliquée à un élément est un pourcentage du parent de l'élément, pas nécessairement la totalité de la fenêtre.
Les unités de la fenêtre peuvent sembler être des pourcentages à ce stade. Ils sont cependant très différents. Dans le cas des pourcentages, la largeur ou la hauteur de l'élément enfant est décidée par rapport à son parent. Ceci est illustré dans l'exemple de codage ci-dessous :
La largeur de « percent-box » et « viewport-box » est définie sur 60 % dans l'exemple ci-dessus. Comme le montre l'image de sortie, les deux sections occupent la même surface. La largeur du « pourcentage de la boîte intérieure » est définie sur 90 % de la largeur de sa section parent. Par rapport à la « boîte à pourcentage », la « boîte à pourcentage intérieure » occupe 90 % de l'espace. La largeur de la « fenêtre intérieure de la boîte » est définie sur « 90vw ». Comme le montre la figure ci-dessous, la « boîte intérieure de la fenêtre » occupe 90 % de la taille de la fenêtre, ce qui est plus grand que sa section parent.
Sortie :
Quand utiliser les unités de la fenêtre
Ces unités sont particulièrement utiles dans les cas où la largeur, la hauteur ou la taille des éléments doivent être spécifiées par rapport à la fenêtre car elles dépendent sur les dimensions de la fenêtre.
Sections ou images d'arrière-plan en mode plein écran
La définition d'images d'arrière-plan sur des éléments qui couvrent complètement l'écran est populaire. De même, vous souhaiterez peut-être créer un site Web où chaque partie de produit ou de service occupe tout l'écran. Dans de telles circonstances, vous pouvez définir la largeur des éléments correspondants à 100 % et la hauteur des éléments « 100vh ». Vous pouvez le voir dans l'exemple d'image d'arrière-plan ci-dessous :
Le code ci-dessus est utilisé pour afficher l'image d'arrière-plan en plein écran. Pour ce faire, nous devons définir la largeur de « section complète » à 100 % et la hauteur à « 100vh ». De plus, nous devons passer le chemin de l'image à « image plein écran ». Nous pouvons l'utiliser pour que l'image d'arrière-plan remplisse tout l'écran, comme indiqué dans l'image ci-dessous.
Ceci est un exemple de section plein écran :
Le code ci-dessus est utilisé pour afficher la section plein écran. Pour ce faire, nous devons définir la largeur de « section complète » à 100 % et la hauteur à « 100vh ». Comme indiqué dans l'image ci-dessous, nous devons définir la couleur d'arrière-plan sur "section plein écran".
Sortie :
Comment utiliser les unités de la fenêtre pour centrer les éléments :
Lorsque vous souhaitez placer un élément exactement au milieu de l'écran de votre utilisateur, les unités de fenêtre peuvent être très utiles. Si vous connaissez la hauteur de l'élément, tout ce que vous avez à faire est de définir les valeurs supérieure et inférieure de la propriété margin sur [(100 – height)/2]vh.
Cependant, nous pouvons maintenant centrer les composants à la fois verticalement et horizontalement à l'aide de Flexbox ou de CSS Grid. Ceci est illustré dans l'exemple ci-dessous :
Dans l'exemple ci-dessus, nous utilisons une unité de fenêtre pour centrer l'élément. Pour ce faire, nous devons connaître la hauteur de l'élément. Nous avons défini la hauteur de la partie "centrée" dans l'exemple ci-dessus à "70vh". Maintenant, nous utilisons la formule [(100 – height)/2]vh pour obtenir "30vh" [(100 – 70)/2 = 30vh] comme sortie. Les marges supérieure et inférieure doivent être définies respectivement sur « centré » et « 30vh ». Comme le montre l'image ci-dessous, cela nous permet de centrer les éléments sans effort.
Titres avec unités de fenêtre
La taille de la fenêtre affecte directement la valeur des unités de la fenêtre . Si vous sélectionnez la taille de police de vos en-têtes à l'aide d'unités de fenêtre, elles s'adapteront précisément à l'écran. Lorsque la largeur de la fenêtre change, le navigateur redimensionne automatiquement le texte du titre pour qu'il s'adapte. Tout ce que vous avez à faire maintenant est de trouver la valeur de début de taille de police appropriée dans les unités de fenêtre.
Cela fonctionne, et sur les grandes fenêtres, notre titre sera plus grand, tandis que sur les petites fenêtres, il sera plus petit. Un problème est que sur les très grandes fenêtres, le titre peut devenir trop grand, tandis que sur les très petites fenêtres, il peut devenir trop petit. Par conséquent, nous devrons peut-être utiliser des points d'arrêt pour définir une taille de police statique. peut résoudre une partie du problème en utilisant l'unité "vmax" pour s'assurer que notre titre ne devienne pas trop petit. Notre titre représentera quatre pour cent de la plus grande taille de police entre la largeur et la hauteur de la fenêtre :
h1 {
font-size: 5vmax;
text-align: center;
}
Vous pouvez voir le code dans l'exemple ci-dessous :
Sortie :
Conseils importants à retenir lors de l'utilisation d'unités de fenêtre
Il y a quelques points à garder à l'esprit si vous décidez d'utiliser des unités de fenêtre dans vos projets.
Soyez prudent lorsque vous utilisez des unités de fenêtre. pour définir la largeur d'un élément. Si la propriété de débordement de l'élément racine est définie sur auto, les navigateurs supposeront que les barres de défilement n'existent pas. En conséquence, les éléments seront un peu plus larges que vous ne le pensez. Considérez le balisage suivant avec quatre éléments div :
div {
hauteur : 50vh;
largeur : 50vw;
float : left ;
}
Chaque div devrait normalement occuper un quart de l'écran disponible. La largeur de chaque div, en revanche, est calculée en supposant qu'il n'y a pas de barre de défilement. Les composants div sont un peu plus larges que la largeur requise pour qu'ils apparaissent côte à côte à cause de cela.
Ce problème peut être résolu en modifiant la largeur du div de "50vw" à 50%. La conclusion est que lors de la définition de la largeur des composants de bloc, vous devez utiliser des pourcentages afin que les barres de défilement n'interfèrent pas avec le calcul de la largeur.
Browser Support
Chaque navigateur principal semble prendre en charge ces unités. . Cependant, lors de l'utilisation d'unités de fenêtre d'affichage, il reste quelques défauts et difficultés à prendre en compte. Dans Firefox, par exemple, « 100vh » n'a aucun effet sur les éléments dont la propriété display est définie sur table. Chrome ne prend pas en charge les unités de fenêtre pour les largeurs de bordure, les espaces de colonne, les valeurs de transformation et les ombres de boîte.
La forme finale
Vous pouvez voir comment j'augmente ou réduit la taille de l'écran dans le gif images ci-dessous. La mise en page reste la même quelle que soit la taille de l'écran. Il reste stable sur toutes les tailles d'écran. Par conséquent, vous pouvez résoudre le problème de résolution plus élevée en utilisant des unités de fenêtre d'affichage. Pour des résolutions plus élevées, les unités de la fenêtre CSS fonctionnent de manière transparente.
Ces dernières années, l'une de mes améliorations de navigateur préférées a été les unités de fenêtre d'affichage. Les unités Viewport sont idéales si vous souhaitez une grande polyvalence lorsqu'il s'agit de personnaliser les fonctionnalités d'un site sur une variété d'appareils. À mon avis, les unités de visualisation conviennent parfaitement à une large gamme d'appareils. J'espère que vous êtes déjà fan des unités de visualisation si vous avez lu jusqu'ici. Si vous avez des questions, contactez nos experts commerciaux dès aujourd'hui.
Source link