CSS-Viewport: So erstellen Sie eine adaptive Bildschirmhöhe mit vh und vmax

CSS Viewport: So erstellen Sie eine adaptive Bildschirmhöhe mit vh und vmax

Im modernen Webdesign ist adaptives Layout zu einer wesentlichen Technologie geworden. Da die Bildschirmgrößen und Auflösungen verschiedener Geräte unterschiedlich sind, wird es zu einer Herausforderung, die Seite auf verschiedenen Geräten gut anzuzeigen.

In CSS ist Viewport ein wichtiges Element zur Steuerung des Layouts und der Anzeige von Webseiten. Das Ansichtsfenster kann als das Fenster der Webseitenansicht betrachtet werden, das die Breite, Höhe, das Zoomverhältnis und andere verwandte Eigenschaften der Webseite definiert. In diesem Artikel stellen wir vor, wie Sie die vh- und vmax-Einheiten von Viewport verwenden, um eine adaptive Bildschirmhöhe zu implementieren.

vh (Ansichtsfensterhöhe) ist die prozentuale Einheit der Ansichtsfensterhöhe, die ein bestimmtes Verhältnis zur Höhe des Ansichtsfensters darstellt. Wenn beispielsweise die Höhe eines Elements auf 50 vh eingestellt ist, nimmt seine Höhe 50 % der Höhe des Ansichtsfensters ein.

vmax stellt den maximalen Größenwert des Ansichtsfensters dar, der der größere von vh und vw (Ansichtsfensterbreite) ist. Mit anderen Worten, vmax kann seinen Wert basierend auf der größeren Breite und Höhe des Ansichtsfensters bestimmen.

Als nächstes werden wir anhand von Beispielcode demonstrieren, wie man mit vh und vmax eine adaptive Bildschirmhöhe erstellt.

Zuerst müssen wir den folgenden Code in das <meta>-Tag im HTML-Header einfügen, um den Browser anzuweisen, den Viewport festzulegen: <meta>标签中添加以下代码，用于告诉浏览器对Viewport进行设置：

<meta name="viewport" content="width=device-width, initial-scale=1">

然后，在CSS样式表中，我们可以通过如下方式来使用vh和vmax单位：

body {
  margin: 0;
}

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-size: 4vmax;
}

在上面的示例代码中，我们创建了一个高度为100vh的容器（.container），并在其中居中显示了一个文本（.text）。容器采用了display: flexrrreee

Dann haben wir im CSS-Stylesheet Sie können die Einheiten vh und vmax wie folgt verwenden:

rrreee

Im obigen Beispielcode haben wir einen Container (.container) mit einer Höhe von 100vh erstellt und darin zentriert einen Text (.text) angezeigt. Der Container verwendet das Attribut display: flex, um eine vertikale und horizontale Zentrierung zu erreichen. Darüber hinaus ist die Schriftgröße des Texts auf 4vmax eingestellt, sodass er sich dynamisch an die größere Größe von Höhe und Breite des Ansichtsfensters anpasst.

Mit dem oben genannten CSS-Code können wir ein Layout implementieren, das sich an die Bildschirmhöhe anpasst. Dieses Layout sieht je nach Bildschirmgröße des Geräts auf verschiedenen Geräten gut aus.

Zusammenfassend lässt sich sagen, dass die Verwendung von vh- und vmax-Einheiten uns dabei helfen kann, ein Layout zu erstellen, das sich an die Bildschirmhöhe anpasst. Indem wir die Höhe des Elements auf vh-Einheiten festlegen, können wir dafür sorgen, dass es einen Teil der Höhe des Ansichtsfensters einnimmt. Durch die Verwendung von Vmax-Einheiten können Sie die Größe von Elementen basierend auf der größeren Breite und Höhe des Ansichtsfensters dynamisch ändern. 🎜🎜Ich hoffe, dass Sie durch die Einführung und den Beispielcode dieses Artikels die VH- und VMAX-Einheiten besser verstehen und verwenden und dadurch ein besseres adaptives Webseitenlayout erreichen können. In der tatsächlichen Projektentwicklung können wir vh, vmax und andere CSS-Attribute entsprechend den spezifischen Anforderungen und Designanforderungen kombinieren, um ein flexibleres und schöneres Webseitenlayout zu erstellen. 🎜

Das obige ist der detaillierte Inhalt vonCSS-Viewport: So erstellen Sie eine adaptive Bildschirmhöhe mit vh und vmax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!