Was ist der Hauptunterschied zwischen den CSS-Einheiten „vh'/„vw' und „%'?

CSS-Einheiten: Erkundung der Unterschiede zwischen vh/vw und %

Einführung

In Im Bereich des CSS-Stils kann eine breite Palette von Einheiten zum Definieren von Elementabmessungen verwendet werden. Unter diesen sind vh und vw relativ neue Einheiten, die aufgrund ihrer wahrgenommenen Ähnlichkeit mit der gebräuchlicheren Prozenteinheit für einige Verwirrung gesorgt haben. Dieser Artikel untersucht den grundlegenden Unterschied zwischen diesen Einheiten, um Licht auf ihre einzigartigen Anwendungsszenarien zu werfen.

vh und vw: Ein Prozentsatz des Ansichtsfensters

Wie die Frage schon sagt, vh (Ansichtsfensterhöhe) und vw (Ansichtsfensterbreite) sind Einheiten, die den Prozentsatz der Höhe bzw. Breite des aktuellen Ansichtsfensters messen. Beispielsweise stellt 100vh 100 % der Höhe des aktuellen Ansichtsfensters dar.

Prozentuale Einheiten (%): Relativ zu übergeordneten Elementen

Im Gegensatz zu vh und vw handelt es sich um prozentuale Einheiten (%) geben einen Wert relativ zur Größe des übergeordneten Elements an. Dies bedeutet, dass 100 % Höhe immer 100 % der Höhe des übergeordneten Elements darstellen, unabhängig von der Größe des Ansichtsfensters.

Der wichtigste Unterscheidungsfaktor: Ansichtsfensterabhängigkeit

Der entscheidende Unterschied zwischen vh/vw und % liegt in ihrer Abhängigkeit vom Ansichtsfenster. vh- und vw-Einheiten sind so konzipiert, dass sie dynamisch mit dem Ansichtsfenster skalieren und sicherstellen, dass sich die Elementabmessungen entsprechend anpassen, wenn der Benutzer die Größe des Browserfensters ändert oder zu verschiedenen Geräten navigiert.

Dies wird beispielsweise gewährleistet, wenn die Höhe eines Elements auf 100 vh eingestellt wird Es füllt die gesamte Höhe des Ansichtsfensters aus, unabhängig von der spezifischen Bildschirmauflösung oder dem Gerät. Andererseits füllt eine Höhe von 100 % nur die Höhe des übergeordneten Elements aus und hinterlässt möglicherweise leeren Raum unter dem Element, wenn das übergeordnete Element eine geringere Höhe als das Ansichtsfenster hat.

Praktisches Beispiel

Beachten Sie das bereitgestellte HTML- und CSS-Code-Snippet:

<div class="parent">
    <div class="child">100% height (parent is 200px)</div>
</div>
<div class="viewport-height">100vh height</div>

body, html { height: 100%; }
.parent { height: 200px; }
.child { height: 100%; }
.viewport-height { height: 100vh; }

In diesem Szenario wird das Festlegen von Wenn Sie die Höhe des untergeordneten Elements auf 100 % setzen, füllt es die gesamte Höhe des übergeordneten Divs (200 Pixel) aus und lässt darunter leeren Raum. Wenn Sie jedoch die Höhe des Viewport-Height-Divs auf 100 VH festlegen, füllt es die gesamte Höhe des Viewports aus, unabhängig von der Größe des übergeordneten Elements oder der Bildschirmauflösung.

Fazit

Während vh/vw- und %-Einheiten oberflächlich betrachtet ähnlich erscheinen mögen, unterscheiden sie sich durch ihre zugrunde liegende Abhängigkeit vom Ansichtsfenster. vh- und vw-Einheiten sind besonders nützlich für die Erstellung responsiver Layouts, die sich nahtlos an unterschiedliche Bildschirmgrößen anpassen und so ein einheitliches Benutzererlebnis auf allen Geräten gewährleisten.

Das obige ist der detaillierte Inhalt vonWas ist der Hauptunterschied zwischen den CSS-Einheiten „vh'/„vw' und „%'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!