So verwenden Sie die CSS-Viewport-Einheiten vh und vw, um das Layout an unterschiedliche Bildschirmhöhen anzupassen

So verwenden Sie die CSS-Viewport-Einheiten vh und vw, um ein Layout zu implementieren, das sich an unterschiedliche Bildschirmhöhen anpasst.

Angesichts der Beliebtheit mobiler Geräte müssen viele Websites und Anwendungen auf unterschiedlichen Bildschirmhöhen gut gerendert werden. CSS bietet eine Reihe von Einheiten, von denen sich die Einheiten vh (Ansichtsfensterhöhe) und vw (Ansichtsfensterbreite) ideal für die Anpassung von Layouts an unterschiedliche Bildschirmhöhen eignen. In diesem Artikel wird detailliert beschrieben, wie diese beiden Einheiten verwendet werden, und es werden spezifische Codebeispiele bereitgestellt.

Lassen Sie uns zunächst verstehen, wie diese beiden Einheiten funktionieren:

• vh (Ansichtsfensterhöhe): Diese Einheit stellt einen Prozentsatz der Ansichtsfensterhöhe dar. 1vh entspricht 1 % der Höhe des Ansichtsfensters.
• vw (Ansichtsfensterbreite): Diese Einheit stellt den Prozentsatz der Ansichtsfensterbreite dar. 1vw entspricht 1 % der Breite des Ansichtsfensters.

Als nächstes werden wir diese beiden Einheiten verwenden, um ein Layout zu implementieren, das sich an unterschiedliche Bildschirmhöhen anpasst.

1. Legen Sie die Höhe eines Elements mithilfe von VH-Einheiten fest:
   Wir können die Höhe eines Elements mithilfe von VH-Einheiten festlegen, damit die Größe automatisch basierend auf der Höhe des Ansichtsfensters angepasst wird. Beispielsweise können wir die Höhe eines div-Elements auf 50 % der Bildschirmhöhe festlegen:

div {
  height: 50vh;
}

Auf diese Weise wird die Höhe des div-Elements entsprechend angepasst, wenn es auf einem Bildschirm unterschiedlicher Höhe platziert wird.

2. Verwenden Sie vh-Einheiten für die vertikale Zentrierung:
   Wir können auch vh-Einheiten verwenden, um eine vertikale Zentrierung von Elementen zu erreichen. Dieser Effekt lässt sich leicht durch eine Kombination aus VH-Einheiten und Flexbox-Layout erzielen. Der folgende Code zentriert beispielsweise ein Element vertikal:

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

.element {
  width: 50%;
}

In diesem Beispiel ist das Containerelement so eingestellt, dass es die gesamte Höhe des Ansichtsfensters (100 Vh) einnimmt, und verwendet Flexbox, um seine untergeordneten Elemente vertikal zu zentrieren. Die Breite des untergeordneten Elements ist auf 50 % der Breite des Ansichtsfensters festgelegt.

3. Schriftgröße mithilfe von VW-Einheiten festlegen:
   Eine weitere praktische Möglichkeit, VW-Einheiten zu verwenden, besteht darin, die Schriftgröße festzulegen. Indem wir die Schriftgröße als Prozentsatz der Breite des Ansichtsfensters festlegen, stellen wir sicher, dass die Schrift auf verschiedenen Bildschirmen eine einheitliche Größe hat. Hier ist ein Beispiel:

h1 {
  font-size: 5vw;
}

Hier wird die Schriftgröße des h1-Elements automatisch basierend auf der Breite des Ansichtsfensters angepasst. Auf kleineren Bildschirmen wird die Schriftgröße verkleinert, während auf größeren Bildschirmen die Schriftgröße größer wird.

Zusammenfassung:
Mithilfe der CSS-Viewport-Einheiten vh und vw können wir problemlos Layouts implementieren, die sich an unterschiedliche Bildschirmhöhen anpassen. Indem wir Elementhöhen und Schriftgrößen festlegen und Layouttechniken wie Flexbox verwenden, können wir sicherstellen, dass unsere Websites und Apps auf verschiedenen Geräten gut dargestellt werden. Die Funktionen und die Flexibilität dieser Einheiten machen sie zu leistungsstarken Werkzeugen für responsives Design.

Ich hoffe, dieser Artikel hilft Ihnen zu verstehen, wie Sie die CSS-Ansichtsfenstereinheiten vh und vw verwenden, um Layouts zu implementieren, die sich an unterschiedliche Bildschirmhöhen anpassen. Mit diesen Geräten können Sie ganz einfach einzigartige und elegante Webdesigns erstellen, die auf einer Vielzahl von Geräten funktionieren.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CSS-Viewport-Einheiten vh und vw, um das Layout an unterschiedliche Bildschirmhöhen anzupassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!