So verwenden Sie die CSS-Viewport-Einheiten vh und vmax, um ein adaptives Rasterlayout zu implementieren

So verwenden Sie die CSS-Viewport-Einheiten vh und vmax, um ein adaptives Rasterlayout zu implementieren

Im modernen Webdesign ist das adaptive Layout ein entscheidender Bestandteil. Es ermöglicht Webseiten eine gute Lesbarkeit und Benutzererfahrung auf verschiedenen Bildschirmgrößen und Geräten. CSS-Ansichtsfenstereinheiten sind ein leistungsstarkes Werkzeug zur Implementierung eines adaptiven Layouts. Darunter sind vh und vmax zwei häufig verwendete Ansichtsfenstereinheiten, die uns bei der Implementierung eines adaptiven Rasterlayouts im Webdesign helfen können.

vh ist die prozentuale Einheit der Höhe des Ansichtsfensters, 1vh entspricht einem Hundertstel der Höhe des Ansichtsfensters. vmax ist eine prozentuale Einheit des größeren Werts der Breite und Höhe des Ansichtsfensters, und 1vmax entspricht einem Hundertstel des größeren Werts der Breite und Höhe des Ansichtsfensters. Beide Einheiten sind äußerst flexibel und in adaptiven Layouts äußerst anpassungsfähig.

Im Folgenden erfahren Sie, wie Sie mit den Einheiten vh und vmax ein adaptives Rasterlayout erstellen.

Zuerst müssen wir einen einfachen Gittercontainer einrichten. In HTML können wir ein div-Element als Container verwenden und einen Klassennamen dafür festlegen, beispielsweise „grid-container“. Dann können wir in CSS diesem Klassennamen Stile hinzufügen, um ein Rasterlayout zu erstellen.

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
}

.grid-item {
  background-color: #eee;
}

Im obigen Code verwenden wir CSS Grid (Rasterlayout), um einen Rastercontainer mit drei Spalten zu erstellen, wobei die untergeordneten Elemente div-Elemente mit dem Klassennamen „.grid-item“ sind.

Als nächstes werden wir dieses Rasterlayout mit vh- und vmax-Einheiten adaptiv machen.

Stellen wir zunächst die Höhe des Gitterbehälters ein. Wir können vh-Einheiten verwenden, um anzugeben, dass die Höhe des Containers ein Prozentsatz der Höhe des Ansichtsfensters ist.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  height: 70vh;
}

Im obigen Code setzen wir die Höhe des Containers auf 70 % der Höhe des Ansichtsfensters. Auf diese Weise passt sich die Höhe des Containers automatisch an unterschiedliche Bildschirmgrößen an.

Als nächstes können wir jede Zelle des Rasterlayouts hochgradig anpassungsfähig machen, indem wir die Höhe der untergeordneten Elemente festlegen.

.grid-item {
  background-color: #eee;
  height: 100%;
}

Im obigen Code setzen wir die Höhe des untergeordneten Elements auf 100 %, sodass sich die Höhe jeder Zelle automatisch an die Höhe des Containers anpasst.

Außerdem können wir Vmax-Einheiten verwenden, um das Rasterlayout auf Bildschirmen mit unterschiedlichen Seitenverhältnissen lesbar zu machen. Wenn wir beispielsweise möchten, dass die Breite jeder Zelle des Rasterlayouts dem größeren Wert der Höhe des Containers entspricht, können wir dies wie folgt festlegen:

.grid-item {
  background-color: #eee;
  height: 100%;
  width: 100vmax;
}

Im obigen Code legen wir die Breite fest Untergeordnetes Element auf 100 Vmax, sodass die Breite jeder Zelle automatisch entsprechend der größeren Ansichtsfensterbreite und Ansichtsfensterhöhe angepasst wird.

Durch die Verwendung von vh- und vmax-Einheiten können wir problemlos ein adaptives Rasterlayout implementieren. Dies ist sehr hilfreich bei der Erstellung von Webdesigns mit guter Lesbarkeit und Benutzererfahrung. Ich hoffe, der Beispielcode in diesem Artikel kann Sie dazu inspirieren, Viewport-Einheiten zu verwenden, um ein adaptives Rasterlayout im Webdesign zu implementieren.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CSS-Viewport-Einheiten vh und vmax, um ein adaptives Rasterlayout zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!