Comment utiliser les unités CSS Viewport vh et vmax pour implémenter une disposition de grille adaptative

Comment utiliser les unités CSS Viewport vh et vmax pour implémenter une disposition de grille adaptative

Dans la conception Web moderne, la mise en page adaptative est un élément crucial. Il permet aux pages Web d'avoir une bonne lisibilité et une bonne expérience utilisateur sur différentes tailles d'écran et appareils. Les unités CSS Viewport sont un outil puissant pour implémenter une mise en page adaptative. Parmi eux, vh et vmax sont deux unités de fenêtre couramment utilisées, qui peuvent nous aider à implémenter une disposition de grille adaptative dans la conception Web.

vh est l'unité de pourcentage de la hauteur de la fenêtre, 1vh est égal à un centième de la hauteur de la fenêtre. vmax est une unité de pourcentage de la plus grande largeur et hauteur de la fenêtre d'affichage, et 1vmax est égal à un centième de la plus grande de la largeur et de la hauteur de la fenêtre d'affichage. Les deux unités sont extrêmement flexibles et hautement adaptables dans des configurations adaptatives.

Ci-dessous, nous explorerons comment utiliser les unités vh et vmax pour créer une disposition de grille adaptative.

Tout d’abord, nous devons mettre en place un conteneur grillagé de base. En HTML, nous pouvons utiliser un élément div comme conteneur et lui attribuer un nom de classe, tel que "grid-container". Ensuite, en CSS, nous pouvons ajouter des styles à ce nom de classe pour créer une disposition en grille.

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
}

.grid-item {
  background-color: #eee;
}

Dans le code ci-dessus, nous utilisons CSS Grid (disposition en grille) pour créer un conteneur de grille à trois colonnes, où les éléments enfants sont des éléments div avec le nom de classe ".grid-item".

Ensuite, nous rendrons cette disposition de grille adaptative en utilisant les unités vh et vmax.

Tout d’abord, définissons la hauteur du conteneur en grille. Nous pouvons utiliser des unités vh pour spécifier que la hauteur du conteneur est un pourcentage de la hauteur de la fenêtre.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  height: 70vh;
}

Dans le code ci-dessus, nous définissons la hauteur du conteneur à 70 % de la hauteur de la fenêtre d'affichage. De cette façon, la hauteur du conteneur s’ajustera automatiquement sur différentes tailles d’écran.

Ensuite, nous pouvons rendre chaque cellule de la disposition de la grille hautement adaptative en définissant la hauteur des éléments enfants.

.grid-item {
  background-color: #eee;
  height: 100%;
}

Dans le code ci-dessus, nous définissons la hauteur de l'élément enfant à 100%, afin que la hauteur de chaque cellule s'ajuste automatiquement en fonction de la hauteur du conteneur.

De plus, nous pouvons utiliser des unités vmax pour rendre la disposition de la grille lisible sur des écrans avec différents formats d'image. Par exemple, si nous voulons que la largeur de chaque cellule de la disposition de la grille soit égale à la plus grande valeur de la hauteur du conteneur, nous pouvons la définir comme ceci :

.grid-item {
  background-color: #eee;
  height: 100%;
  width: 100vmax;
}

Dans le code ci-dessus, nous définissons la largeur du élément enfant à 100vmax, de sorte que chaque La largeur de chaque cellule sera automatiquement ajustée en fonction de la plus grande entre la largeur et la hauteur de la fenêtre.

En utilisant les unités vh et vmax, nous pouvons facilement mettre en œuvre une disposition de grille adaptative. Ceci est très utile pour créer des conceptions Web avec une bonne lisibilité et une bonne expérience utilisateur. J'espère que l'exemple de code de cet article pourra vous inciter à utiliser les unités Viewport pour implémenter une disposition de grille adaptative dans la conception Web.

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!