Utilisez les unités CSS Viewport vmin et vmax pour implémenter le redimensionnement dynamique des éléments

Utilisez les unités CSS Viewport vmin et vmax pour implémenter une méthode d'ajustement dynamique de la taille des éléments

Avec la popularité des appareils mobiles et l'émergence de terminaux de différentes tailles, la conception réactive des pages Web est devenue de plus en plus important. Pour conserver la taille relative des éléments sur différentes tailles d'écran, nous pouvons utiliser les unités CSS Viewport vmin et vmax. Cet article explique comment utiliser ces deux unités pour redimensionner dynamiquement des éléments et fournit quelques exemples de code à titre de référence.

1. Introduction aux unités vmin et vmax
   Avant de présenter l'utilisation spécifique, présentons brièvement les unités vmin et vmax.

vmin est calculé par rapport à la plus petite valeur de la largeur et de la hauteur de la fenêtre, et sa valeur est le pourcentage de la plus petite valeur de la largeur et de la hauteur de la fenêtre. Par exemple, si la largeur de la fenêtre d'affichage est de 800 px et la hauteur de 1 000 px, alors 1vmin est égal à 8 px (1 % de 800 px).
vmax est calculé par rapport à la plus grande valeur de la largeur et de la hauteur de la fenêtre, et sa valeur est le pourcentage de la plus grande valeur de la largeur et de la hauteur de la fenêtre. Par exemple, si la largeur de la fenêtre d'affichage est de 800 px et la hauteur de 1 000 px, alors 1vmax est égal à 10 px (1 % de 1 000 px).

En utilisant les unités vmin et vmax, nous pouvons redimensionner dynamiquement les éléments en fonction de la largeur et de la hauteur de la fenêtre pour les maintenir proportionnels sur différentes tailles d'écran.

2. Comment redimensionner des éléments à l'aide de vmin et vmax
   Voici quelques exemples de code réels d'utilisation de vmin et vmax pour redimensionner des éléments :

.container {
  width: 50vmin;
  height: 50vmax;
  background-color: #f0f0f0;
}

.box {
  width: 20vmin;
  height: 20vmin;
  background-color: #ff0000;
  margin: 2vmin;
}

Dans le code ci-dessus, nous définissons un conteneur (.container) et un élément enfant (. boîte). La largeur et la hauteur du conteneur correspondent toutes deux à 50 % de la plus petite largeur et hauteur de la fenêtre d'affichage, ou à la moitié de la largeur de l'écran. La largeur et la hauteur de l'élément enfant correspondent toutes deux à 20 % de la plus petite largeur et hauteur de la fenêtre d'affichage, ou à 1/5 de la largeur et de la hauteur de l'écran.

En utilisant les unités vmin et vmax pour la largeur et la hauteur de l'élément, vous pouvez vous assurer que l'élément conserve sa taille relative sur différentes tailles d'écran. Lorsque la largeur et la hauteur de la fenêtre changent, la taille de l'élément s'ajuste en conséquence.

3. Tests et adaptation
   Pour garantir que la taille des éléments s'adapte aux différentes tailles d'écran, nous devons effectuer un travail de test et d'adaptation approprié. Vous pouvez utiliser les outils de développement de votre navigateur pour simuler différentes tailles de fenêtre et voir comment les éléments apparaissent sur différents écrans.

Lors de l'adaptation, vous devez prendre en compte les différences de tailles de fenêtre d'affichage des différents appareils et les éventuels problèmes de compatibilité du navigateur. Vous pouvez utiliser des requêtes multimédias CSS et des propriétés multimédias pour appliquer différents styles en fonction de différentes tailles d'écran.

@media (max-width: 768px) {
  .container {
    width: 80vmin;
    height: 80vmax;
  }

  .box {
    width: 30vmin;
    height: 30vmin;
    margin: 5vmin
  }
}

Dans l'extrait de code ci-dessus, nous utilisons une requête multimédia pour nous adapter aux appareils à petit écran (la largeur maximale est de 768 px). Dans ce cas, la largeur et la hauteur du conteneur sont redimensionnées à 80 % de la plus petite de la largeur et de la hauteur de la fenêtre d'affichage, et la largeur et la hauteur de l'enfant sont redimensionnées à 30 % de la plus petite de la largeur et de la hauteur de la fenêtre d'affichage, avec quelques côtés ajoutés. distance.

Grâce aux tests et à l'adaptation, vous pouvez vous assurer que les éléments restent de taille appropriée sur différentes tailles d'écran et offrent une meilleure expérience utilisateur.

Résumé
L'utilisation des unités CSS Viewport vmin et vmax peut efficacement obtenir l'effet de redimensionner dynamiquement les éléments pour s'adapter aux différentes tailles d'écran. En définissant la largeur et la hauteur de l'élément sous forme de pourcentage par rapport à la largeur et à la hauteur de la fenêtre, vous pouvez garantir que l'élément conserve sa taille relative sur différents écrans.

Lors de l'adaptation, des tests et des travaux d'adaptation appropriés doivent être effectués, et les problèmes de compatibilité des différents appareils et navigateurs doivent être pris en compte. Utilisez les requêtes multimédias CSS et les propriétés multimédias pour appliquer différents styles en fonction de différentes tailles d'écran.

Ce qui précède est une introduction à la méthode d'ajustement dynamique de la taille des éléments à l'aide des unités CSS Viewport vmin et vmax et quelques exemples de code réels. J'espère que cela aide!

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!