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!
