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

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;
}

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!