CSS Viewport : Comment créer une hauteur d'écran adaptative à l'aide de vh et vmax-tutoriel CSS-php.cn

CSS Viewport : Comment créer une hauteur d'écran adaptative à l'aide de vh et vmax

WBOY

Libérer： 2023-09-13 08:43:53

original

1288 Les gens l'ont consulté

CSS Viewport: 使用 vh 和 vmax 创建自适应屏幕高度的方法

CSS Viewport : Comment créer une hauteur d'écran adaptative à l'aide de vh et vmax

Dans la conception Web moderne, la mise en page adaptative est devenue une technologie essentielle. Étant donné que les tailles d'écran et les résolutions des différents appareils varient, comment bien afficher la page sur différents appareils devient un défi.

En CSS, Viewport est un élément important utilisé pour contrôler la mise en page et l'affichage des pages Web. La fenêtre d'affichage peut être considérée comme la fenêtre d'affichage de la page Web, qui définit la largeur, la hauteur, le taux de zoom et d'autres propriétés associées de la page Web. Dans cet article, nous expliquerons comment utiliser les unités vh et vmax de Viewport pour implémenter une hauteur d'écran adaptative.

vh (hauteur de la fenêtre) est l'unité de pourcentage de la hauteur de la fenêtre, qui représente un certain rapport par rapport à la hauteur de la fenêtre. Par exemple, si la hauteur d'un élément est définie sur 50vh, sa hauteur occupera 50 % de la hauteur de la fenêtre.

vmax représente la valeur de taille maximale de Viewport, qui est la plus grande entre vh et vw (largeur de la fenêtre). En d’autres termes, vmax peut déterminer sa valeur en fonction de la plus grande largeur et hauteur de la fenêtre.

Ensuite, nous utiliserons un exemple de code pour démontrer comment utiliser vh et vmax pour créer une hauteur d'écran adaptative.

Tout d'abord, nous devons ajouter le code suivant à la balise <meta> dans l'en-tête HTML pour indiquer au navigateur de définir la fenêtre d'affichage : <meta>标签中添加以下代码，用于告诉浏览器对Viewport进行设置：

<meta name="viewport" content="width=device-width, initial-scale=1">

Copier après la connexion

然后，在CSS样式表中，我们可以通过如下方式来使用vh和vmax单位：

body {
  margin: 0;
}

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

.text {
  font-size: 4vmax;
}

Copier après la connexion

在上面的示例代码中，我们创建了一个高度为100vh的容器（.container），并在其中居中显示了一个文本（.text）。容器采用了display: flexrrreee

Ensuite, dans la feuille de style CSS, nous Vous pouvez utiliser les unités vh et vmax comme suit :

rrreee

Dans l'exemple de code ci-dessus, nous avons créé un conteneur (.container) d'une hauteur de 100vh et affiché un texte (.text) centré dessus. Le conteneur utilise l'attribut display:flex pour réaliser un centrage vertical et horizontal. De plus, la taille de la police du texte est définie sur 4vmax afin qu'elle s'ajuste dynamiquement à la plus grande hauteur et largeur de la fenêtre.

Avec le code CSS ci-dessus, nous pouvons implémenter une mise en page qui s'adapte à la hauteur de l'écran. Cette mise en page s'affichera bien sur différents appareils en fonction de la taille de l'écran de l'appareil.

Pour résumer, l'utilisation des unités vh et vmax peut nous aider à créer une mise en page qui s'adapte à la hauteur de l'écran. En définissant la hauteur de l'élément sur les unités vh, nous pouvons lui faire occuper une proportion de la hauteur de la fenêtre. L'utilisation des unités vmax vous permet de redimensionner dynamiquement les éléments en fonction de la plus grande largeur et hauteur de la fenêtre. 🎜🎜J'espère que grâce à l'introduction et à l'exemple de code de cet article, vous pourrez mieux comprendre et utiliser les unités vh et vmax, obtenant ainsi une meilleure mise en page adaptative des pages Web. Dans le développement réel d'un projet, nous pouvons combiner vh, vmax et d'autres attributs CSS en fonction de besoins spécifiques et d'exigences de conception pour créer une mise en page Web plus flexible et plus belle. 🎜

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!