Quelle est l’unité du CSS VW ?

En CSS, vw est une unité de longueur, et une unité de fenêtre fait référence à la largeur par rapport à la fenêtre d'affichage ; la fenêtre d'affichage sera divisée en 100 unités de vw, alors 1vw est égal à 1 du % de largeur de la fenêtre d'affichage. , par exemple, si la largeur du navigateur est de 1 920 px, alors "1vw=1920px/100=19.2px".

(Tutoriel recommandé : Tutoriel vidéo CSS)

Unités de fenêtre

Qu'est-ce qu'une fenêtre d'affichage ?

Côté PC, la viewport fait référence à la zone visible du navigateur

Côté mobile, elle implique 3 viewports : Layout Viewport (Layout viewport), Visual Viewport ( fenêtre visuelle), Fenêtre idéale (fenêtre idéale).

La « fenêtre » dans l'unité de fenêtre fait référence à la zone visible du navigateur côté PC ; du côté mobile, elle fait référence à la fenêtre de mise en page dans Viewport.

Selon la spécification CSS3, l'unité de fenêtre d'affichage comprend principalement les 4 unités suivantes :

1.vw : Par rapport à la largeur de la fenêtre d'affichage, la fenêtre d'affichage est divisée uniformément en 100 unités de vw , et 1vw est égal à la fenêtre d'affichage 1 % de la largeur de la bouche.

2.vh : Par rapport à la largeur de la fenêtre, la fenêtre est divisée en 100 unités de vh, et 1vh est égal à 1% de la hauteur de la fenêtre.

3.vmin : Sélectionnez le plus petit entre vw et vh.

4.vmax : Sélectionnez le plus grand entre vw et vh. Les noms complets de

vw et vh

sont Viewport width et Viewport Height. La largeur et la hauteur de la fenêtre sont équivalentes à 1 % de la largeur et de la hauteur de l'écran. .

vh et vw : hauteur et largeur relatives à la fenêtre d'affichage, pas à l'élément parent (les pourcentages CSS sont relatifs à la hauteur et à la largeur de l'élément parent le plus proche qui le contient). 1vh est égal à 1/100 de la hauteur de la fenêtre et 1vw est égal à 1/100 de la largeur de la fenêtre.

Par exemple : la hauteur du navigateur est de 950 px, la largeur est de 1920 px, 1 vh = 950 px/100 = 9,5 px, 1vw = 1920 px/100 = 19,2 px.

La différence entre vh/vw et %

Code :

<style>
body{background-color:orange;}
.p{width:50vw;height:50vh;background-color:pink;fontsize:3em;}
</style>

<p class="p">P 标签的宽度为 50vw</p>

Effet :

Explication :

1 vw équivaut à 1% de la largeur de la page. Par exemple, la largeur de la page est de 1000px, puis 1vw
équivaut à 10px et vh est la même. La largeur de la balise

P est de 50vw, donc c'est 50% de la largeur de la page, et la hauteur est de 50vh, donc
c'est 50% de la hauteur de la page.

Pour plus de connaissances sur la programmation, veuillez visiter : Apprendre la programmation ! !

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!