Comment utiliser les unités CSS Viewport pour ajuster la position des éléments en fonction de la taille de l'écran-tutoriel CSS-php.cn

Comment utiliser les unités CSS Viewport pour ajuster la position des éléments en fonction de la taille de l'écran

WBOY

Libérer： 2023-09-13 13:18:31

original

1333 Les gens l'ont consulté

如何使用 CSS Viewport 单位来实现根据屏幕尺寸调整元素位置的技巧

Comment utiliser les unités CSS Viewport pour ajuster la position des éléments en fonction de la taille de l'écran

Dans le développement Web, nous rencontrons souvent le besoin d'ajuster la position et la taille des éléments en fonction des différentes tailles d'écran. Pour atteindre cet objectif, les unités CSS Viewport sont largement utilisées. Les unités de fenêtre sont des unités relatives à la taille de la fenêtre du navigateur. En les utilisant, nous pouvons ajuster dynamiquement la position des éléments en fonction de la taille de l'écran, offrant ainsi une meilleure expérience utilisateur.

1. Comprendre les unités Viewport

Il existe quatre types d'unités Viewport : vw (pourcentage de la largeur de la fenêtre), vh (pourcentage de la hauteur de la fenêtre), vmin (pourcentage de la plus petite largeur et hauteur de la fenêtre) et vmax (largeur de la fenêtre). ) et la hauteur).

Prenons vw comme exemple, en supposant que la largeur de la fenêtre d'affichage est de 1 000 px, si nous définissons la largeur d'un élément sur 50vw, sa largeur sera de 500 px (la moitié de 1 000 px), quelle que soit la taille de l'écran de l'utilisateur.

2. Exemple de démonstration

Ce qui suit utilise un exemple pour montrer comment utiliser les unités Viewport pour ajuster la position des éléments.

Code HTML :

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      .box {
        width: 50vw;
        height: 50vh;
        background-color: #ff0000;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

Copier après la connexion

Dans le code ci-dessus, nous créons un élément div nommé "conteneur" et définissons la largeur et la hauteur sur 100vw et 100vh, ce qui signifie qu'il remplira tout l'écran. Ensuite, un élément div nommé « box » est ajouté au conteneur, et la largeur et la hauteur sont définies sur 50vw et 50vh, et la couleur d'arrière-plan est rouge.

En exécutant le code ci-dessus, nous pouvons voir que quelle que soit la taille de l'écran, l'élément box est toujours affiché au centre, et sa largeur et sa hauteur sont ajustées de manière adaptative en fonction de la taille de l'écran.

3. Plus de scénarios d'application

En plus des exemples de base ci-dessus d'ajustement de la position et de la taille des éléments, l'unité Viewport peut également être utilisée pour des scénarios d'application plus complexes. Par exemple, vous pouvez utiliser les unités vw pour définir la taille des images réactives, ou utiliser les unités vh pour obtenir un effet de défilement plein écran qui s'adapte à la hauteur de l'écran.

De plus, vous pouvez également combiner des requêtes multimédia CSS et des unités Viewport pour ajuster différentes mises en page et styles en fonction de la taille de l'écran. Par exemple, vous pouvez masquer un élément sur un appareil à petit écran et l'afficher sur un appareil à grand écran, et vous pouvez utiliser les unités Viewport pour ajuster la taille et la position de l'élément.

Résumé

Les unités CSS Viewport offrent un moyen flexible d'ajuster la position et la taille des éléments en fonction de la taille de l'écran. Nous pouvons utiliser les unités vw, vh, vmin et vmax pour définir la largeur, la hauteur et la position des éléments afin d'offrir une meilleure expérience utilisateur. Qu'il s'agisse d'une simple mise en page centrée ou d'une conception réactive complexe, l'unité Viewport peut nous aider à obtenir des effets de mise en page et de style flexibles.

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!