So verwenden Sie Fenstereinheiten für das Layout in CSS3

Die Viewport-Einheit gibt es schon seit ein paar Jahren, aber wir haben sie nicht sehr oft gesehen. Sie werden mittlerweile von allen gängigen Browsern unterstützt und bieten einzigartige Funktionen, die sie in bestimmten Situationen nützlich machen, insbesondere wenn es um responsives Design geht. In diesem Artikel teilen wir Ihnen hauptsächlich die Methode zur Verwendung von Fenstereinheiten für das Layout in CSS3 mit, in der Hoffnung, Ihnen dabei zu helfen, die Kenntnisse von CSS3 besser zu erlernen.

<script>ec(2);</script>

Einführung in die Viewport-Einheit

Der Viewport ist der Bereich, in dem Ihr Browser tatsächlich Inhalte anzeigt – mit anderen Worten: Ihr Webbrowser umfasst nicht Symbolleisten und Schaltflächen. Diese Einheiten sind vw, vh, vmin und vmax. Sie alle stellen das Verhältnis der Browsergröße (Ansichtsfenster) und der Skalierungsänderung dar, die durch die Größenänderung des Fensters verursacht wird.

Zum Beispiel haben wir ein Ansichtsfenster mit 1000 Pixeln (Breite) und 800 Pixeln (Höhe).

vw – stellt dar, dass die Breite des Ansichtsfensters (Viewport) 1 % beträgt, in unserem Beispiel 50vw = 500px.
vh – Prozentsatz der Fensterhöhe 50 vh = 400 Pixel.
vmin – Der Wert von vmin ist der kleinere Wert des aktuellen vw und vh. Da es sich in unserem Beispiel um den Querformatmodus handelt, ist 50vim = 400px.
vmax – der Prozentsatz der großen Größe. 50vmax = 500px.

Sie können sie überall dort verwenden, wo Pixelwerte verwendet werden können, z. B. Breite, Höhe, Rand, Schriftgröße usw. Sie berechnen diese Werte neu, indem sie die Größe des Fensters ändern oder den Browser des Geräts drehen.

Nehmen Sie die gesamte Höhe der Seite ein

Jeder Frontend-Entwickler arbeitet daran. Ihr erster Instinkt ist, Folgendes zu tun:

#elem{
height: 100 %;
}

Allerdings, es sei denn, wir fügen 100 % Höhe zum HTML- und Textkörper hinzu, aber Das allein wird nicht funktionieren, da ein solcher Code unelegant ist und höchstwahrscheinlich den Rest Ihres Designs zerstören wird. Mit vh wird es ganz einfach, stellen Sie einfach 100vh für die Höhe ein und es wird immer die Höhe Ihres Fensters sein.

#elem{
height: 100vh;
}

Dies scheint ein perfektes Vollbildbild für den Helden zu sein und sieht sehr stilvoll aus.

Die Größe des untergeordneten Elements ändert sich relativ zum Browser und nicht zum übergeordneten Element.

In manchen Fällen möchten Sie, dass sich die Größe des untergeordneten Elements relativ zum Fenster ändert und nicht zum übergeordnetes Element übergeordnetes Element. Ebenso wird dies gemäß dem vorherigen Beispiel nicht funktionieren:

#parent{
width: 400px;
}
#child{
/* Dies entspricht 100 % der Breite des übergeordneten Elements, nicht der gesamten Seite Breite:

#parent{
width: 400px;
}
#child{
/* Dies entspricht 100 % der Seite, unabhängig von der Größe des übergeordneten Elements */
Breite: 100vw;
}



Responsive Schriftgröße


Viewport-Einheiten können auch im Text verwendet werden! In diesem Beispiel verwenden wir vm, um die Schriftgröße festzulegen, um eine großartige Zeile mit CSS-responsivem Text zu erstellen. Auf Wiedersehen Fittext!
Responsive Vertical Centering


Durch Festlegen der Breite, Höhe und des Randes des Elements in Viewport-Einheiten können Sie die Zentrierung festlegen, ohne weitere Tricks anwenden zu müssen. Hier ist ein Rechteck mit einer Höhe von 60 Vh und einem oberen und unteren Rand von 20 Vh. Ihre Summe beträgt 100 Vh (60 2*20), sodass es immer zentriert ist, auch wenn die Größe des Fensters geändert wird.

#rectangle{
width: 60vw;
height: 60vh;
margin: 20vh auto;
}



Gleiche Breite Spalten


Sie können Ansichtsfenstereinheiten verwenden, um ein reaktionsfähiges Raster einzurichten. Sie verhalten sich wie Prozentzahlen, beziehen sich jedoch immer auf die Größe des Ansichtsfensters. Sie könnten sie also in ein übergeordnetes Element einfügen, das breiter als das Fenster ist, aber es hätte immer noch das Raster, um es so breit zu halten, wie es sein sollte. Dadurch lässt sich ganz einfach ein Vollbild-Slider erstellen. Diese Technik erfordert, dass Elemente mit float:left ausgerichtet werden, um benachbarte Elemente auszurichten:

.column-2{
float: left;
width: 50vw;
}
.column-4{
float: left;
width: 25vw;
}
.column-8{
float: left;
width: 12.5vw ;
}



Verwandte Empfehlungen:


Window Unit-based Typesetting_html/css_WEB-ITnose

Bringen Sie Ihnen in fünf Minuten das CSS-Rasterlayout bei

Was sind die Fähigkeiten des CSS-Layouts

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Fenstereinheiten für das Layout in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!