sv, lv, dv
Seit 2013 unterstützen Browser die Einheiten vw, vh, vmin und vmax, mit denen die Größe von Elementen im Verhältnis zur Größe des Browserfensters (Viewport) bestimmt werden kann. Die Geräte und ihre Bildschirme haben sich jedoch weiterentwickelt.
Eines der häufigsten Probleme, mit denen Entwickler heute konfrontiert werden, ist die Größenänderung des Viewports auf mobilen Geräten. Es wäre logisch anzunehmen, dass 100vh oder 100% Bildschirmhöhe eine Höhe bedeutet, die der Bildschirmhöhe des Geräts entspricht, aber vh berücksichtigt nicht die Adressleiste und die Navigationsleiste des Browsers auf mobilen Geräten. Daher ist die Höhe des Inhalts manchmal zu groß, was zu zusätzlichem Scrollen führt.
svw und svh stehen für die kleinste (minimale) Breite und Höhe des Bildschirms einschließlich der Browser-Elemente, lvw und lvh für die größte (maximale) Breite und Höhe einschließlich der Browser-Elemente. dvw und dvh berechnen dynamisch die Bildschirmgröße in verschiedenen Browserzuständen, wenn die Adressleiste und die Navigationsleiste des Browsers geöffnet/geschlossen sind.
Inhaltsverzeichnis:
Beispiel
Die Breite des ersten Bildschirms beträgt 100 % der Breite des Ansichtsfensters und die Höhe 100 % der Höhe des Ansichtsfensters; die Größe wird beim Öffnen/Schließen von Browser-Elementen dynamisch berechnet:
.vh {
min-height: 100vh;
}
.dvh {
min-height: 100dvh;
}Die Demo muss auf einem Handy betrachtet werden, um den Unterschied zu sehen.
100 vh
Darstellung der Elementhöhe, wenn 100vh angegeben ist.
Um den Unterschied zu sehen, verwenden Sie einen mobilen Browser.
Kleinstes Viewport
svw
Die Größe wird als Prozentsatz der Breite des Ansichtsfensters angegeben. 100svw entspricht der vollen Breite des Ansichtsfensters mit allen geöffneten Browserelementen. 1svw = 1% der Breite des Ansichtsfensters.
svh
Größe in Prozent der Höhe des Ansichtsfensters. 100svh ist die volle Höhe des Ansichtsfensters mit allen geöffneten Browserelementen. 1svh = 1% der Höhe des Ansichtsfensters.
svmin
Größe als Prozentsatz der kleineren Dimension des Ansichtsfensters mit allen geöffneten Browserelementen. Wenn die Höhe kleiner als die Breite ist (z.B. bei horizontaler Ausrichtung des Telefons), erfolgt die Berechnung relativ zur Höhe.
svmax
Die Größe als Prozentsatz der größeren Dimension des Ansichtsfensters mit allen geöffneten Browserelementen. Wenn die Höhe größer als die Breite ist (z. B. bei normaler Ausrichtung des Telefons), erfolgt die Berechnung relativ zur Höhe.
Größtes Viewport
lvw
Die Größe wird als Prozentsatz der Breite des Ansichtsfensters angegeben. 100lvw entspricht der vollen Breite des Ansichtsfensters mit allen geschlossenen Browserelementen. 1lvw = 1% der Breite des Ansichtsfensters.
lvh
Größe in Prozent der Höhe des Ansichtsfensters. 100lvh ist die volle Höhe des Ansichtsfensters mit allen geschlossenen Browserelementen. 1lvh = 1% der Höhe des Ansichtsfensters.
lvmin
Die Größe als Prozentsatz der kleinsten Abmessung des Ansichtsfensters, wenn alle Browserelemente geschlossen sind. Wenn die Höhe kleiner als die Breite ist (z.B. bei horizontaler Ausrichtung des Telefons), erfolgt die Berechnung relativ zur Höhe.
lvmax
Die Größe als Prozentsatz der größten Abmessung des Ansichtsfensters, wenn alle Browserelemente geschlossen sind. Wenn die Höhe größer als die Breite ist (z.B. bei normaler Ausrichtung des Telefons), erfolgt die Berechnung relativ zur Höhe.
Dynamisches Viewport
dvw
Die Größe wird als Prozentsatz der Breite des Ansichtsfensters angegeben. 100dvw entspricht der vollen Breite des Ansichtsfensters und wird beim Öffnen/Schließen von Browser-Elementen dynamisch neu berechnet. 1dvw = 1% der Breite des Ansichtsfensters.
dvh
Größe in Prozent der Höhe des Viewports. 100dvh ist die volle Höhe des Ansichtsfensters und wird beim Öffnen/Schließen von Browserelementen dynamisch neu berechnet. 1dvh = 1% der Höhe des Ansichtsfensters.
dvmin
Die Größe ist ein Prozentsatz der kleineren Abmessung des Ansichtsfensters und wird beim Öffnen/Schließen von Browserelementen dynamisch neu berechnet. Wenn die Höhe kleiner als die Breite ist (z.B. bei horizontaler Ausrichtung des Telefons), erfolgt die Berechnung relativ zur Höhe.
dvmax
Die Größe ist ein Prozentsatz der größeren Viewport-Dimension und wird beim Öffnen/Schließen von Browser-Elementen dynamisch neu berechnet. Wenn die Höhe größer als die Breite ist (z.B. bei normaler Ausrichtung des Telefons), erfolgt die Berechnung relativ zur Höhe.