So erstellen Sie mit CSS Viewport Unit vh ein Webseitenlayout, das sich an mobile Bildschirme anpasst

So verwenden Sie die CSS Viewport Unit vh, um ein an den mobilen Bildschirm angepasstes Webseitenlayout zu erstellen

Die Beliebtheit und Nutzung mobiler Geräte nimmt immer weiter zu und immer mehr Webseiten müssen an diese angepasst werden mobiler Bildschirm. Um dieses Problem zu lösen, hat CSS3 eine neue Einheit eingeführt – die Viewport-Einheit, die vh (Viewport-Höhe) enthält. In diesem Artikel untersuchen wir, wie man mit vh-Einheiten Webseitenlayouts erstellt, die sich an mobile Bildschirme anpassen, und stellen spezifische Codebeispiele bereit.

1. Einführung in die Viewport-Einheit vh
Viewport bezieht sich auf den Bereich, in dem eine Webseite Inhalte im Browserfenster anzeigt. Die vh-Einheit ist eine Einheit, die auf der Höhe des Viewports basiert. Der Wert von vh ist ein Prozentsatz relativ zur Höhe des Ansichtsfensters, und 1vh entspricht 1 % der Höhe des Ansichtsfensters. Wenn die Höhe des Ansichtsfensters beispielsweise 800 Pixel beträgt, entspricht 1vh 8 Pixel.

2. Erstellen Sie ein an den Mobiltelefonbildschirm angepasstes Webseitenlayout. Mit der vh-Einheit können Sie ganz einfach ein an den Mobiltelefonbildschirm angepasstes Webseitenlayout erstellen.

Vollbild-Layout
1. Vollbild-Layout bedeutet, dass der Webinhalt auf dem gesamten Handy-Bildschirm angezeigt wird, ohne dass weiße Ränder zurückbleiben. Dies kann erreicht werden, indem die Höhe der HTML- und Body-Elemente auf 100 VH eingestellt wird:
   

html, body {
  height: 100vh;
  margin: 0;
  padding: 0;
}

Nach dem Login kopieren

Vertikales zentriertes Layout
2. Vertikales zentriertes Layout bedeutet, dass der Inhalt vertikal in der Mitte auf dem Mobiltelefonbildschirm angezeigt wird. Sie können eine vertikale Zentrierung erreichen, indem Sie die Höhe des übergeordneten Containers auf 100 vh einstellen und das Flex-Layout verwenden:
   

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

Nach dem Login kopieren

Festes Top-Layout
3. Festes Top-Layout bedeutet, dass der Inhalt oben auf der Webseite am oberen Rand der Seite fixiert ist mobilen Bildschirm und scrollt nicht mit der Bildlaufleiste. Dies kann erreicht werden, indem die Höhe des Inhaltsbereichs auf 100 vh eingestellt und eine feste Positionierung verwendet wird:
   

.container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
}

Nach dem Login kopieren

Adaptives Bildlayout
4. Bei der Webseitenproduktion ist es häufig erforderlich, adaptive Bilder auf dem Mobiltelefonbildschirm anzuzeigen. Mit der vh-Einheit können Sie die Höhe und Breite des Bildes auf einen bestimmten Anteil des Ansichtsfensters einstellen. Stellen Sie beispielsweise die Höhe des Bildes auf 50 vh und die Breite auf 50 vh ein, um ein adaptives Bildlayout zu erreichen:
   

img {
  height: 50vh;
  width: 50vh;
}

Nach dem Login kopieren

Durch die Verwendung der CSS-Viewport-Einheit vh können wir ganz einfach Webseiten-Layouts erstellen, die sich an die Bildschirme von Mobiltelefonen anpassen. In diesem Artikel werden mehrere gängige Layoutmethoden vorgestellt, darunter Vollbildlayout, vertikal zentriertes Layout, festes Top-Layout und adaptives Bildlayout, und es werden spezifische Codebeispiele bereitgestellt. Ich hoffe, dass dieser Artikel den Lesern helfen kann, sich besser an mobile Bildschirme anzupassen und die Benutzererfahrung von Webseiten zu verbessern.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit CSS Viewport Unit vh ein Webseitenlayout, das sich an mobile Bildschirme anpasst. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!