Leitfaden für CSS-Ansichtsfenster-Einheiten vw, vh, vmin, vmax

Viewport-Prozentlängen, oder Viewport-Einheiten Da sie häufiger genannt werden, handelt es sich um responsive CSS-Einheiten, mit denen Sie Dimensionen definieren können als Prozentsatz der Breite oder Länge des Ansichtsfensters. Viewport-Einheiten können in Fällen nützlich sein, in denen andere ansprechende CSS-Einheiten, wie z. B. Prozentsätze, sind schwer zu arbeiten.

Obwohl Dokumentation des W3C on viewport units enthält alles, was man in die Theorie stecken kann, es ist nicht sehr ausführlich. In diesem Artikel sehen wir uns an, wie diese CSS-Einheiten aussehen in der Praxis arbeiten.

Viewport-Höhe (vh) & Viewport Breite (vw)

W3C Definiert Viewport wie “Größe des anfänglichen enthaltenen Blocks”. Mit anderen Worten, Viewport ist der Bereich im Browserfenster enthalten oder einen anderen Anzeigebereich auf einem Bildschirm.

Das vw und vh Einheiten steht für den Prozentsatz der Breite und Höhe des aktuellen Ansichtsfensters. Sie können einen Wert annehmen zwischen 0 und 100 nach folgenden Regeln:

 100vw = 100% der Breite des Ansichtsfensters 1vw = 1% der Breite des Ansichtsfensters 100vh = 100% der Höhe des Ansichtsfensters 1vh = 1% der Höhe des Ansichtsfensters 

Unterschiede zu prozentualen Einheiten

Wie unterscheiden sich also Ansichtsfenster von Prozenteinheiten? Prozentuale Einheiten erben die Größe ihres übergeordneten Elements während Viewport-Einheiten dies nicht tun. Viewport-Einheiten werden immer als berechnet Prozentsatz der Größe des Ansichtsfensters. Ein durch Viewport-Einheiten definiertes Element kann daher die Größe des übergeordneten Elements überschreiten.

Beispiel: Vollbildabschnitte

Vollbild-Abschnitte sind wohl die bekanntesten Anwendungsfälle von Viewport-Einheiten.

Das HTML ist ziemlich einfach; wir haben einfach drei abschnitte untereinander und wir wollen, dass jeder von ihnen den gesamten Bildschirm abdecken (aber nicht mehr).

In der CSS verwenden wir 100vh Als ein Höhe Wert und 100% wie Breite. Wir benutzen das nicht vw Einheit hier als Standard, Bildlaufleisten werden ebenfalls hinzugefügt auf die Größe des Darstellungsbereichs. Wenn wir also die Breite: 100VW; Regel a horizontale Bildlaufleiste würde am erscheinen unten im Browserfenster.

 * Marge: 0; Polsterung: 0;  section background-size: cover; Hintergrundposition: Mitte; Breite: 100%; Höhe: 100 Vh;  .section-1 Hintergrundbild: URL ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg');  .section-2 Hintergrundbild: URL ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg');  .section-3 Hintergrundbild: URL ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg');  

In der GIF-Demo unten sehen Sie das vh ist wirklich eine ansprechende Einheit.

Nach den W3C-Dokumenten, die oben genannten Problem mit der horizontalen Bildlaufleiste kann durch Hinzufügen von gelöst werden Überlauf: Auto; Regel zum Wurzelelement. Diese Lösung funktioniert nur teilweise, obwohl. Die horizontale Bildlaufleiste verschwindet zwar, aber Breite ist wird weiterhin basierend auf der Breite des Ansichtsfensters berechnet (die Seitenleiste ist enthalten), sodass die Elemente etwas größer sind als sie sein sollten.

Ich würde sagen, ich würde es nicht wagen, das zu benutzen vw Gerät an Größenänderung von Vollbildelementen aus diesem grund. Wir brauchen es nicht einmal als Breite: 100%; Regel funktioniert einwandfrei. Bei Vollbild-Layouts war es immer eine echte Herausforderung einen korrekten Höhenwert einstellen und das vh Einheit bietet eine brillante Lösung dafür.

Andere Anwendungsfälle

Wenn du interessiert bist andere Anwendungsfälle vw und vh Lullabot hat einen großartigen Artikel, der eine Liste enthält Handvoll Beispiele aus der Praxis (mit Codepen-Demos) wie:

• Karten mit festem Verhältnis.
• Ein Element kürzer halten als der Bildschirm.
• Text skalieren.
• Aus dem Behälter brechen.

Opera.dev hat auch ein kurzes Tutorial, wie Sie das nutzen können vw Einheit in Responsive Typografie erstellen.

Sie können Viewport-Einheiten nicht nur für die verwenden Breite und Höhe Eigenschaften aber auf einem anderen. Zum Beispiel können Sie Legen Sie die Größe der Polster und Ränder fest Verwendung der vw und vh auch Einheiten.

Viewport min (vmin) & Viewport max (vmax)

Das vmin und vmax Einheiten ermöglichen den Zugriff auf die Größe der kleineren oder größeren Seite des Darstellungsbereichs nach den folgenden Regeln:

 100 vmin = 100 vw oder 100 vh, je nachdem, welcher Wert kleiner ist 1 vmin = 1 vw oder 1 vh, je kleiner der Wert 100 vmax = 100 vw oder 100 vh, je nachdem, welcher Wert größer 1 vmax = 1 vw oder 1 vh ist, je nachdem, welcher Wert größer ist 

Also im Falle eines Hochformat, 100vmin entspricht 100 vw, wie der Viewport ist horizontal kleiner als vertikal. Aus dem gleichen Grunde, 100vmax wird gleich sein 100vh.

Ebenso im Falle eines Landschaftsorientierung, 100vmin entspricht 100vh, wie der Viewport ist vertikal kleiner als horizontal. Und natürlich, 100vmax wird gleich sein 100 vw Hier.

Beispiel: Machen Sie Heldtexte auf jedem Bildschirm lesbar

Das vmin und vmax Einheiten sind weitaus weniger bekannt als vw und vh. Sie können jedoch hervorragend als Ersatz für die Orientierung @Medien Anfragen. Zum Beispiel, vmin und vmax kann nützlich sein, wenn Sie Elemente haben, die seltsam aussehen bei verschiedenen Aspektverhältnissen.

Der neue Kodex enthält ein großartiges Tutorial, in dem sie besprechen, wie Sie können Heldentext lesbar halten auf jedem Bildschirm mit der vmin Einheit. Heldentexte neigen dazu, zu schauen zu klein für mobile Geräte und zu groß für große Monitore.

Hier ist die Hauptidee ihrer Lösung:

 h1 font-size: 20vmin; Schriftfamilie: Avenir, serifenlos; Schriftgewicht: 900; Text ausrichten: Mitte;  

In der Codepen-Demo können Sie herausfinden, wie vmin löst das Lesbarkeitsproblem von Heldentexten. Greife auf ... zu “Volle Seite” dann auf Codepen Ändern Sie die Größe Ihres Browserfensters sowohl horizontal als auch vertikal, um zu sehen, wie sich der Heldentext ändert.

Browser-Unterstützung

Wie Sie in der CanIUse-Tabelle unten sehen können, Browserunterstützung ist relativ gut für Viewport-Einheiten. Beachten Sie jedoch, dass einige Versionen von IE und Edge nicht unterstützt werden vmax. Auch iOS 6 und 7 haben ein Problem mit dem vh Einheit, das wurde in iOS 8 behoben.