Comment utiliser les unités de fenêtre pour la mise en page en CSS3

L'unité Viewport existe depuis quelques années, mais nous ne l'avons pas vue utilisée très souvent. Ils sont désormais pris en charge par tous les principaux navigateurs et offrent des fonctionnalités uniques qui les rendent utiles dans certaines situations, notamment celles impliquant un design réactif. Dans cet article, nous partageons principalement avec vous la méthode d'utilisation des unités de fenêtre pour la mise en page en CSS3, dans l'espoir de vous aider à mieux acquérir les connaissances de CSS3.

<script>ec(2);</script>

Introduction à l'unité Viewport

La Viewport est la zone dans laquelle votre navigateur affiche réellement le contenu - en d'autres termes, votre navigateur Web n'inclut pas barres d'outils et boutons. Ces unités sont vw, vh, vmin et vmax. Ils représentent tous le rapport entre la taille du navigateur (Viewport) et le changement d'échelle provoqué par le redimensionnement de la fenêtre.

Par exemple, nous avons une fenêtre d'affichage de 1000px (largeur) et 800px (hauteur)

vw - représente la largeur de la fenêtre d'affichage (Viewport) est de 1%, dans notre exemple 50vw = 500px.
vh——Pourcentage de la hauteur de la fenêtre 50vh = 400px.
vmin——La valeur de vmin est la plus petite valeur des vw et vh actuels. Dans notre exemple, parce qu'il s'agit du mode paysage, 50vim = 400px.
vmax - le pourcentage de grande taille. 50vmax = 500px.

Vous pouvez les utiliser partout où les valeurs de pixels peuvent être utilisées, telles que la largeur, la hauteur, la marge, la taille de la police, etc. Ils recalculeront ces valeurs en redimensionnant la fenêtre ou en faisant pivoter le navigateur de l'appareil.

Prendre toute la hauteur de la page

Tous les développeurs front-end travaillent là-dessus. Votre premier réflexe est de faire ceci :

#elem{
height: 100%;
}

Cependant, à moins que nous ajoutions 100 % de hauteur au code HTML et au corps, mais cela seul ne fonctionnera pas, car un tel code n'est pas élégant et brisera très probablement le reste de votre conception. Utiliser vh cela devient assez simple, il suffit de régler 100vh pour la hauteur et ce sera toujours la hauteur de votre fenêtre.

#elem{
hauteur : 100vh;
}

Cela semble être une image plein écran parfaite pour le héros et a l'air très élégante.

La taille de l'élément enfant change par rapport au navigateur plutôt qu'à l'élément parent

Dans certains cas, vous souhaitez que la taille de l'élément enfant change par rapport à la fenêtre plutôt que l'élément parent de l'élément parent. De même, selon l'exemple précédent, cela ne fonctionnera pas :

#parent{
width: 400px;
}
#child{
/* Ceci est égal à 100% de la largeur parent, pas de la page entière. */
width: 100%;
>

Si nous utilisons vw pour définir l'élément enfant, alors il débordera simplement et occupera la page entière. Largeur :

#parent{
width : 400px;
}
#child{
/* Ceci est égal à 100 % de la page, quelle que soit la taille du parent */.
largeur : 100vw;
}


Taille de police réactive

Les unités de fenêtre peuvent également être utilisées dans le texte ! Dans cet exemple, nous utilisons vm pour définir la taille de la police afin de créer une superbe ligne de texte réactif CSS. Au revoir Fittext !

Centrage vertical réactif

En définissant la largeur, la hauteur et la marge de l'élément dans les unités de la fenêtre, vous pouvez définir le centrage sans utiliser d'autres astuces.

Voici un rectangle d'une hauteur de 60vh et d'une marge supérieure et inférieure de 20vh. Leur somme est de 100vh (60 2*20), ce qui le rend toujours centré même si la fenêtre est redimensionnée.

#rectangle{
largeur : 60vw;
hauteur : 60vh;
marge : 20vh auto;
}


Largeur égale colonnes

Vous pouvez utiliser des unités de fenêtre pour configurer une grille réactive. Ils se comportent comme des pourcentages mais sont toujours relatifs à la taille de la fenêtre. Vous pouvez donc les placer dans un élément parent plus large que la fenêtre, mais il aura toujours la grille pour la garder aussi large qu'elle devrait l'être. Cela facilite la création d’un curseur plein écran.

Cette technique nécessite que les éléments soient alignés avec float:left pour aligner les éléments adjacents :

.column-2{
float: left;
width: 50vw;
>
.column-4{
float: gauche;
width: 25vw;
>
.column-8{
float: left;
width: 12.5vw ;
}


Recommandations associées :

Composition basée sur les unités de fenêtre_html/css_WEB-ITnose

Apprenez-vous la mise en page CSS Grid en cinq minutes

Quelles sont les compétences de la mise en page CSS

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!