Was ist die Einheit von CSS VW?

In CSS ist vw eine Längeneinheit, und eine Ansichtsfenstereinheit bezieht sich auf die Breite relativ zum Ansichtsfenster. Das Ansichtsfenster wird gleichmäßig in 100 vw-Einheiten unterteilt. Dann entspricht 1 vw 1 % der Ansichtsfensterbreite, z Durchsuchen Die Breite des Browsers beträgt 1920 Pixel, dann „1vw=1920px/100=19,2px“.

(Empfohlenes Tutorial: CSS-Video-Tutorial)

Viewport-Einheiten

Was ist ein Viewport?

Auf der PC-Seite bezieht sich das Ansichtsfenster auf den sichtbaren Bereich des Browsers.

Auf der mobilen Seite handelt es sich um 3 Ansichtsfenster: Layout-Ansichtsfenster (Layout-Ansichtsfenster), Visuelles Ansichtsfenster (Visuelles Ansichtsfenster), Ideales Ansichtsfenster (ideal). Ansichtsfenster).

Das „Ansichtsfenster“ in der Ansichtsfenstereinheit bezieht sich auf den sichtbaren Bereich des Browsers auf der PC-Seite; auf der mobilen Seite bezieht es sich auf das Layout-Ansichtsfenster im Ansichtsfenster.

Gemäß den CSS3-Spezifikationen umfassen die Ansichtsfenstereinheiten hauptsächlich die folgenden 4 Einheiten:

1.vw: Relativ zur Breite des Ansichtsfensters ist das Ansichtsfenster in 100 vw-Einheiten unterteilt, und 1 vw entspricht 1 % der Breite des Ansichtsfensters.

2.vh: Relativ zur Breite des Ansichtsfensters ist das Ansichtsfenster in 100 vh-Einheiten unterteilt, und 1vh entspricht 1 % der Höhe des Ansichtsfensters.

3.vmin: Wählen Sie den kleinsten zwischen vw und vh aus.

4.vmax: Wählen Sie den größten zwischen vw und vh aus. Die vollständigen Namen von

vw und vh

sind Viewport-Breite und Viewport-Höhe. Die Breite und Höhe des Fensters entsprechen 1 % der Bildschirmbreite und -höhe.

vh und vw: Höhe und Breite relativ zum Ansichtsfenster, nicht zum übergeordneten Element (CSS-Prozentsätze beziehen sich auf die Höhe und Breite des nächstgelegenen übergeordneten Elements, das es enthält). 1vh entspricht 1/100 der Höhe des Ansichtsfensters und 1vw entspricht 1/100 der Breite des Ansichtsfensters.

Zum Beispiel: Die Browserhöhe beträgt 950 Pixel, die Breite beträgt 1920 Pixel, 1 vh = 950 px/100 = 9,5 px, 1vw = 1920 px/100 = 19,2 px.

Der Unterschied zwischen vh/vw und %

Code:

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

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

Effekt:

Erklärung:

1 vw entspricht 1 % der Seitenbreite. Beispielsweise beträgt die Seitenbreite 1000px, dann ist 1vw
10px, vh ist dasselbe. Die Breite des

P-Tags beträgt 50vw, also 50 % der Seitenbreite, und die Höhe beträgt 50vh, also
50 % der Seitenhöhe.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmieren lernen! !

Das obige ist der detaillierte Inhalt vonWas ist die Einheit von CSS VW?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!