Comment utiliser l'unité CSS Viewport vh pour créer une mise en page Web qui s'adapte aux écrans mobiles

Comment utiliser l'unité CSS Viewport vh pour créer une mise en page Web adaptée à l'écran mobile

La popularité et l'utilisation des appareils mobiles sont de plus en plus répandues, et de plus en plus de pages Web doivent être adaptées à l'écran mobile. écran mobile. Pour résoudre ce problème, CSS3 a introduit une nouvelle unité unit-Viewport, qui inclut vh (hauteur de la fenêtre). Dans cet article, nous explorerons comment utiliser les unités vh pour créer des mises en page Web adaptées aux écrans mobiles et fournirons des exemples de code spécifiques.

1. Introduction à l'unité Viewport vh
Viewport fait référence à la zone dans laquelle une page Web affiche le contenu dans la fenêtre du navigateur. L'unité vh est une unité basée sur la hauteur de la fenêtre. La valeur de vh est un pourcentage par rapport à la hauteur de la fenêtre et 1vh est égal à 1 % de la hauteur de la fenêtre. Par exemple, si la hauteur de la fenêtre est de 800 pixels, alors 1vh équivaut à 8 pixels.

2. Créez une mise en page Web adaptée à l'écran du téléphone mobile
À l'aide de l'unité vh, vous pouvez facilement créer une mise en page Web adaptée à l'écran du téléphone mobile. Plusieurs méthodes de mise en page courantes seront présentées ci-dessous.

1. Disposition plein écran
   La disposition plein écran signifie que le contenu Web est affiché sur tout l'écran du téléphone mobile sans laisser de bords blancs. Ceci peut être réalisé en définissant la hauteur des éléments html et body sur 100vh :

html, body {
  height: 100vh;
  margin: 0;
  padding: 0;
}

2. Disposition centrale verticale
   La disposition centrale verticale signifie que le contenu est affiché verticalement au centre sur l'écran du téléphone mobile. Vous pouvez obtenir un centrage vertical en définissant la hauteur du conteneur parent sur 100vh et en utilisant la disposition flexible :

.container {
  display: flex;
  align-items: center;
  height: 100vh;
}

3. Mise en page fixe supérieure
   La disposition fixe supérieure signifie que le contenu en haut de la page Web est fixé en haut de la page Web. écran mobile et ne défile pas avec la barre de défilement. Cela peut être réalisé en réglant la hauteur de la zone de contenu sur 100vh et en utilisant un positionnement fixe :

.container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
}

4. Mise en page adaptative des images
   Dans la production de pages Web, il est souvent nécessaire d'afficher des images adaptatives sur l'écran du téléphone mobile. Vous pouvez utiliser l'unité vh pour définir la hauteur et la largeur de l'image sur une certaine proportion de la fenêtre. Par exemple, définissez la hauteur de l'image sur 50vh et la largeur sur 50vh pour obtenir une disposition adaptative de l'image :

img {
  height: 50vh;
  width: 50vh;
}

3. . Résumé
En utilisant l'unité CSS Viewport vh , nous pouvons facilement créer des mises en page Web qui s'adaptent aux écrans des téléphones mobiles. Cet article présente plusieurs méthodes de mise en page courantes, notamment la mise en page plein écran, la mise en page centrée verticalement, la mise en page fixe supérieure et la mise en page d'image adaptative, et fournit des exemples de code spécifiques. J'espère que cet article pourra aider les lecteurs à mieux s'adapter aux écrans mobiles et à améliorer l'expérience utilisateur des pages 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!