CSS Viewport : Comment utiliser les unités vh, vw, vmin et vmax pour une conception réactive

Porte d'affichage CSS : comment utiliser les unités vh, vw, vmin et vmax pour obtenir une conception réactive, exemples de code spécifiques requis

Dans la conception Web réactive moderne, nous souhaitons généralement que la page Web s'adapte à différentes tailles d'écran et appareils pour Offrez une bonne expérience utilisateur. L'unité CSS Viewport (viewport unit) est l'un des outils importants pour nous aider à atteindre cet objectif. Dans cet article, nous expliquerons comment utiliser les unités vh, vw, vmin et vmax pour implémenter une conception réactive et fournirons des exemples de code spécifiques.

Tout d'abord, jetons un coup d'œil à ces nouvelles unités de fenêtre :

1. vh (hauteur de la fenêtre) : représente une unité de pourcentage par rapport à la hauteur de la fenêtre. Par exemple, 1vh est égal à 1 % de la hauteur de la fenêtre.
2. vw (largeur de la fenêtre) : représente l'unité de pourcentage par rapport à la largeur de la fenêtre. Par exemple, 1vw est égal à 1 % de la largeur de la fenêtre.
3. vmin (viewport minimum) : représente une unité de pourcentage par rapport à la plus petite de la largeur et de la hauteur de la fenêtre. Par exemple, 1vmin est égal à 1 % de la plus petite largeur ou hauteur de la fenêtre.
4. vmax (viewport maximum) : représente une unité de pourcentage par rapport à la plus grande de la largeur et de la hauteur de la fenêtre. Par exemple, 1vmax est égal à 1 % de la plus grande largeur ou hauteur de la fenêtre.

Ensuite, nous utiliserons un exemple simple pour illustrer comment utiliser ces unités pour mettre en œuvre un design réactif.

Supposons que nous ayons une mise en page Web qui contient une barre de navigation supérieure et une zone de contenu. Nous voulons que la hauteur de la barre de navigation soit toujours de 30 pixels et que la hauteur de la zone de contenu s'adapte pour remplir l'espace restant.

Tout d'abord, nous devons définir le style de la barre de navigation :

.navbar {
  height: 30px;
}

Ensuite, nous pouvons utiliser les unités vh pour définir la hauteur de la zone de contenu. Supposons que nous voulions que la hauteur de la zone de contenu occupe 80 % de la hauteur de la fenêtre :

.content {
  height: 80vh;
}

De cette façon, quelle que soit la hauteur réelle de la fenêtre, la zone de contenu sera remplie à 80 % de la hauteur.

En plus de régler la hauteur, nous pouvons également utiliser des unités VW pour définir la largeur. Supposons que nous voulions que la largeur de la zone de contenu occupe 50 % de la largeur de la fenêtre d'affichage :

.content {
  width: 50vw;
}

De même, nous pouvons utiliser les unités vmin et vmax pour définir les valeurs plus petites et plus grandes de la hauteur et de la largeur de la fenêtre d'affichage. Par exemple, si nous voulons que la largeur et la hauteur d'un élément soient toujours égales, nous pouvons utiliser l'unité vmin :

.square {
  width: 50vmin;
  height: 50vmin;
}

De cette façon, la largeur et la hauteur de l'élément resteront égales quelles que soient la largeur et la hauteur réelles de l'élément. fenêtre d'affichage.

Enfin, si nous voulons que la largeur ou la hauteur d'un élément soit toujours relative au maximum de la taille de la fenêtre d'affichage, nous pouvons utiliser les unités vmax. Par exemple, si nous voulons que la largeur et la hauteur d'un bouton ne dépassent toujours pas 30 % de la taille de la fenêtre d'affichage :

.button {
  width: 30vmax;
  height: 30vmax;
}

De cette façon, quelles que soient la largeur et la hauteur réelles de la fenêtre d'affichage, la largeur et la hauteur du bouton ne dépassera pas la taille de la fenêtre d'affichage 30 %.

Pour résumer, l'utilisation des unités vh, vw, vmin et vmax peut nous aider à obtenir une mise en page Web plus flexible et plus réactive. En définissant la largeur et la hauteur des éléments, nous pouvons ajuster automatiquement la mise en page en fonction de la taille de la fenêtre pour offrir la meilleure expérience utilisateur.

J'espère que les exemples de code et l'introduction de cet article vous seront utiles pour comprendre et utiliser les unités CSS Viewport. Je vous souhaite du succès dans la mise en œuvre du responsive design !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!