Maison  >  Article  >  interface Web  >  Qu'est-ce que VW en CSS

Qu'est-ce que VW en CSS

WBOY
WBOYoriginal
2022-04-18 16:01:304889parcourir

En CSS, vw est une unité de fenêtre et une unité relative, ce qui signifie un pourcentage de la largeur de la fenêtre ; vw est relatif à la largeur de la fenêtre. La fenêtre est la zone visible du navigateur client, et la fenêtre. est divisé à parts égales. Pour 100 unités, la taille de 1vw correspond à un pour cent de la largeur de la fenêtre.

Qu'est-ce que VW en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Qu'est-ce que vw en CSS ?

L'unité CSS est une unité de mesure, comprenant les unités de taille et les unités de couleur. Nous utilisons souvent des unités en vis-à-vis pour éviter de confondre la mise en page de la page Web dans différentes vues.

vw est l'abréviation de la largeur de la fenêtre d'affichage. 1vw est toujours égal à un centième de la largeur actuelle de la fenêtre. vw est une unité de fenêtre et une unité relative. La fenêtre d'affichage est divisée en 100 unités de VW par rapport à sa largeur.

L'avantage de vw est qu'il peut obtenir directement la largeur. Cependant, l'utilisation de % ne peut pas obtenir correctement la largeur de la zone visuelle sans définir la largeur du corps, c'est donc un bon avantage.

La fenêtre ici fait référence à la zone visible du navigateur, comme indiqué ci-dessous :

Quest-ce que VW en CSS

Exemple de code :

h1{font-size:8vw;}

Si la largeur de la fenêtre est de 200 mm, alors la taille de police de l'élément h1 dans le le code ci-dessus sera de 16 mm, soit (8x200)/100

L'exemple est le suivant :

<html>
<style>
.p1{font-size:5vw;}
.p2{font-size:5px;}
</style>
</head>
<body>
<p class="p1">相对于viewport宽度大小的文字</p>
<p class="p2">px宽度大小的文字</p>
</body>
</html>

Résultat de sortie :

Quest-ce que VW en CSS

(Partage vidéo d'apprentissage : tutoriel vidéo 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn