Heim > Web-Frontend > CSS-Tutorial > VW vs. VH vs. %: Wann sollten Sie ansichtsfensterbezogene Einheiten in CSS verwenden?

VW vs. VH vs. %: Wann sollten Sie ansichtsfensterbezogene Einheiten in CSS verwenden?

Susan Sarandon
Freigeben: 2024-12-10 16:21:10
Original
719 Leute haben es durchsucht

VW vs. VH vs. %: When Should You Use Viewport-Relative Units in CSS?

Vh/vw vs. % verstehen: Ein Leitfaden zu Ansichtsfenster-relativen Einheiten in CSS

Während %-Einheiten den Prozentsatz eines Elements messen Im Verhältnis zum übergeordneten Container sind die Einheiten vw und vh speziell dafür konzipiert, den Prozentsatz der Höhe bzw. Breite des Ansichtsfensters zu messen. Diese Unterscheidung wird wichtig, wenn der übergeordnete Container des Elements nicht das Ansichtsfenster selbst ist.

In Fällen, in denen die Höhe oder Breite des übergeordneten Containers dynamisch ist oder vom Ansichtsfenster abweicht, sorgen vw- und vh-Einheiten für eine einheitliche Größenanpassung. Wenn beispielsweise ein Element innerhalb eines übergeordneten Divs mit einer Höhe von 1000 Pixel auf 100 % Höhe eingestellt ist, kann seine tatsächliche Höhe je nach Größe des Ansichtsfensters variieren.

Umgekehrt würde die Einstellung desselben Elements auf 100 vh sicherstellen, dass es immer angezeigt wird nimmt 100 % der Höhe des Ansichtsfensters ein, unabhängig von den Abmessungen des übergeordneten Divs. Dadurch wird die Möglichkeit einer inkonsistenten Größenanpassung im responsiven Webdesign beseitigt.

Um diesen Unterschied zu veranschaulichen, betrachten Sie das folgende Codebeispiel:

body,
html {
    height: 100%;
}

.parent {
    background: lightblue;
    float: left;
    height: 200px;
    padding: 10px;
    width: 50px;
}

.child {
    background: pink;
    height: 100%;
    width: 100%;
}

.viewport-height {
    background: gray;
    float: right;
    height: 100vh;
    width: 50px;
}
Nach dem Login kopieren

In diesem Beispiel wird das untergeordnete Div innerhalb des übergeordneten Div angezeigt haben eine Höhe, die 100 % der Höhe des übergeordneten Divs (200 Pixel) entspricht. Das Ansichtsfenster-Höhen-Div hat jedoch immer eine Höhe, die 100 % der Höhe des Ansichtsfensters beträgt, auch wenn sich die Höhe des übergeordneten Divs ändern würde.

Daher bieten vw- und vh-Einheiten eine genauere Kontrolle über die Elementgröße Verhältnis zum Ansichtsfenster, was sie besonders nützlich für die Erstellung reaktionsfähiger Weblayouts macht, die sich nahtlos an unterschiedliche Bildschirmgrößen und Seitenverhältnisse anpassen.

Das obige ist der detaillierte Inhalt vonVW vs. VH vs. %: Wann sollten Sie ansichtsfensterbezogene Einheiten in CSS verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage