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!