Was bedeutet vh in CSS3

In CSS3 bedeutet vh „Prozentsatz der Fensterhöhe“, was eine Fenstereinheit und eine relative Einheit ist; vh ist relativ zur Höhe des Fensters Ist in 100 Einheiten unterteilt, beträgt die Größe von 1vh ein Prozent der Fensterhöhe.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

Was bedeutet vh in CSS3?

vh ist relativ zur Höhe des Ansichtsfensters (1vw entspricht 1/100 der Breite des Ansichtsfensters).

Auf der Client-Seite bezieht sich der Viewport auf den sichtbaren Bereich des Browsers.

Auf der mobilen Seite handelt es sich um 3 Viewports: Layout Viewport (Layout-Viewport), Visual Viewport (visuelles Viewport), Ideal Viewport (ideal). Ansichtsfenster). Es bezieht sich auf das Layout-Ansichtsfenster. „Ansichtsfenster“ bezieht sich auf die Größe des sichtbaren Bereichs im Browser, dh auf die Größe von window.innerWidth/window.innerHeight, ohne die Größe des Browserbereichs in der Titelleiste der Taskleiste untere Symbolleiste.

vh-Einheit kann die Größe automatisch entsprechend der Höhe des Fensters ändern, 1vh ist 1 % der Fensterhöhe;

vw und vh sind die Breite und Höhe relativ zum Ansichtsfenster (Ansichtsfenster, auch Ansichtsfenster, Horizont genannt). Sichtweite).

Erweiterte Kenntnisse:

vw: Prozentsatz der Ansichtsfensterbreite (1vw entspricht 1 % der Ansichtsfensterbreite)

vh: Prozentsatz der Ansichtsfensterhöhe (1vh entspricht 1 % der Ansichtsfensterhöhe)

vmin: Wählen Sie das kleinste zwischen vw und vh aus

vmax: Wählen Sie das größte zwischen vw und vh aus

vw und vh basieren auf dem Ansichtsfenster, nicht auf dem übergeordneten Element. 1vw entspricht 1/100 der Breite des Ansichtsfensters, 1vh entspricht 1/100 der Höhe des Ansichtsfensters, zum Beispiel:

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

Der Unterschied zwischen vw, vh und %

% ist das eingestellte Verhältnis zur Größe des übergeordneten Elements, vw vh wird durch die Größe des Ansichtsfensters bestimmt

vw, vh kann direkt Ermitteln Sie die Höhe und %, wenn der Körper nicht festgelegt ist. Bei der Höhe kann die Höhe des sichtbaren Bereichs nicht ermittelt werden.

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWas bedeutet vh in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!