Die VW-Einheit in CSS verstehen

Die Einheit für die Ansichtsfensterbreite ist hauptsächlich für die Verwendung in Bildschirmmedien konzipiert und funktioniert daher in Druck-Stylesheets möglicherweise nicht wie erwartet. Für den Druck wird empfohlen, absolute Einheiten wie Zoll oder Punkte zu verwenden.

Was ist eine VW-Einheit?

vw steht für Viewport-Breite, eine relative Maßeinheit, die einen Prozentsatz der Breite des Ansichtsfensters darstellt. Die Zahl vor vw ist der Prozentsatz der Breite des Ansichtsfensters, den diese Länge beträgt. Wenn Sie beispielsweise 10vw verwenden, entspricht dies einer Länge von 10% der Breite Ihres Ansichtsfensters.

Der Ansichtsbereich ist lediglich ein Wort für die Größe Ihres Bildschirms. Wenn Sie sich also an einem großen Desktop mit einer Breite von 1920px befinden, entspricht 10vw 192px. Wenn Sie sich stattdessen an einem Mobilgerät mit einer Breite von 360px befinden, entspricht 10vw nur 36px.

1vw bedeutet 1 Prozent der Bildschirmbreite.

Die Einheiten unterscheiden sich von Prozentsätzen, da sie sich immer auf den Ansichtsbereich beziehen, während ein Prozentsatz sich auf den übergeordneten Container des Elements bezieht.

Dies bedeutet, dass die Breite des Ansichtsfensters im Gegensatz zu allen anderen Einheitentypen in keiner Weise mit der Basisschriftgröße zusammenhängt. Dieser Unterschied ist signifikant und macht die Einheiten einzigartig.

Wo kann ich die VW-Einheit verwenden?

Fließende Typografie mit vw passt die Schriftgröße automatisch an die Breite des Bildschirms an. Heutzutage gibt es unzählige Geräte mit unterschiedlichen Ansichtsfenstergrößen und die fließende Typografie hilft Ihnen, unabhängig von der Bildschirmgröße ein besseres Design zu erstellen.

vw ist nützlich, um Elemente mit voller Breite (100%) zu erstellen, die die gesamte Breite des Ansichtsfensters ausfüllen. Natürlich können Sie jeden beliebigen Prozentsatz der Breite des Ansichtsfensters verwenden, um andere Ziele zu erreichen, z. B. 50% für die halbe Breite usw.

Relative Einheiten vs. absolute Einheiten in CSS

Wir haben erwähnt, dass die Einheit vw eine relative Einheit ist. Lassen Sie uns also tiefer in die CSS-Einheitentypen eintauchen, um zu verstehen, was relative und absolute Typen bedeuten.

Relative Einheiten

Relative Einheiten werden in Bezug auf einen anderen Wert definiert. Dies sind beispielsweise VW, VH, REM und EM

VW steht für 1% Ansichtsfensterbreite. Das heißt, wenn Sie die Breiteneigenschaft als 10vw definieren, nimmt das Element 10% der verfügbaren Breite des Ansichtsfensters ein.

VH steht für Viewport Height (Ansichtsfensterhöhe) und ist dasselbe wie vw, jedoch für die Höhe statt der Breite.

Diese relativen Längenwerte haben einen klaren Vorteil gegenüber den absoluten, denn sie können dazu beitragen, dass Ihre Website responsive wird. Das heißt, Ihre Website passt sich automatisch und auf vorhersehbare Weise an die Größe der verfügbaren Bildschirmgröße an.

Absolute Einheiten

Beispiele für absolute Längenwerte sind: px (das ist 1/96 Zoll), in (ein Zoll) oder cm (das sind 37.8px oder 25.2/64in).

Wenn Sie diese Einheiten verwenden, können Sie sicher sein, dass sie immer die gleiche Größe haben. Dies ist insbesondere dann nützlich, wenn Sie die genauen Abmessungen der Ausgabe kennen, was meistens bei Drucklayouts der Fall ist. Wenn dies jedoch nicht der Fall ist, wie beispielsweise bei den vielen verschiedenen Bildschirmgrößen, ist es nicht so nützlich.

Was Sie bei der Einheit „Ansichtsfensterbreite“ beachten sollten

Seien Sie vorsichtig, wenn Sie die Breite eines Elements mithilfe von Ansichtsfenstereinheiten festlegen. Denn wenn die overflow-Eigenschaft des Stammelements auf auto eingestellt ist, gehen Browser davon aus, dass die Bildlaufleisten nicht vorhanden sind. Dadurch werden die Elemente etwas breiter als erwartet. Erwägen Sie eine Auszeichnung mit 4 div-Elementen, die wie folgt formatiert sind:

div {
  height: 50vh;
  width: 50vw;
}

Normalerweise würde man erwarten, dass jedes div ein Viertel des verfügbaren Bildschirms einnimmt. Die Breite jedes div wird jedoch unter der Annahme berechnet, dass keine Bildlaufleiste vorhanden ist. Dadurch sind die div-Elemente etwas breiter als die für ihre Anzeige erforderliche Breite.

Das Ändern der Breite der Divs von 50vw auf 50% löst dieses Problem. Die Schlussfolgerung ist, dass Prozentsätze verwendet werden sollten, wenn die Breite für Blockelemente festgelegt wird, damit die Bildlaufleisten die Berechnung ihrer Breite nicht beeinträchtigen.

VW-Schlüsselpunkte

• vw steht für Viewport-Breite. Es stellt einen Prozentsatz der Viewport-Breite dar und entspricht 1 % der Viewport-Breite.
• Wird häufig für responsive Designs verwendet, bei denen Elemente mit der Breite des Ansichtsfensters skaliert werden, und es gewährleistet Anpassungsfähigkeit und optimale Layoutdarstellung auf unterschiedlichen Bildschirmgrößen.
• vw-Einheiten werden verwendet, um einen dynamischen horizontalen Abstand zwischen Elementen zu erzeugen. Bietet Konsistenz im Abstand im Verhältnis zur Breite des Ansichtsfensters.
• Wenn Sie die Breite eines Containers auf 50vw festlegen, wird ein Design erstellt, das die Hälfte der Ansichtsfensterbreite einnimmt.

VW-Umrechnungstabellen

Die Ansichtsfenstergröße beträgt in den folgenden Beispielen 1920px

vw in andere Einheiten umgerechnet:

	1vw	10vw	50vw	100vw
px	19.2px	192px	960px	1920px
pt	14.4pt	144pt	720pt	1440pt
in	0.2in	2in	10in	20in
pc	1.2pc	12pc	60pc	120pc
cm	0.508cm	5.08cm	25.4cm	50.8cm
mm	5.08mm	50.8mm	254mm	508mm

Verschiedene Einheiten, umgerechnet in vw:

	1	10	50	100
px	0.052vw	0.521vw	2.604vw	5.208vw
pt	0.069vw	0.694vw	3.472vw	6.944vw
in	5vw	50vw	250vw	500vw
pc	0.833vw	8.333vw	41.667vw	83.333vw
cm	1.968vw	19.685vw	98.425vw	196.85vw
mm	0.197vw	1.968vw	9.842vw	19.685vw

Abschluss

vw ist eine relative Einheit, die einen Prozentsatz der Ansichtsfensterbreite des Geräts darstellt und häufig bei der Erstellung reaktionsfähiger Designs verwendet wird.