CSS-Ansichtsfenstereinheiten: CSS-Einheiten *vh (dvh, lvh, svh) und *vw

CSS-Ansichtsfenstereinheiten sind für die Erstellung responsiver Layouts, die sich an unterschiedliche Bildschirmgrößen anpassen, unerlässlich. Diese Einheiten messen Abmessungen relativ zur Höhe und Breite des Ansichtsfensters und ermöglichen Entwicklern die Gestaltung flexibler und anpassungsfähiger Webschnittstellen. In diesem Leitfaden werden die traditionellen vh- und vw-Einheiten behandelt und neuere Einheiten wie dvh, lvh und svh vorgestellt. Dabei wird erläutert, wie sie die Reaktionsfähigkeit verbessern und Ansichtsfensteränderungen effektiver verarbeiten.

1. Was sind Ansichtsfenstereinheiten in CSS?

Ansichtsfenstereinheiten sind relative Einheiten, die sich dynamisch an die Größe des Ansichtsfensters des Browsers anpassen. Die am häufigsten verwendeten sind:

• vh: 1 % der Höhe des Ansichtsfensters.
• vw: 1 % der Breite des Ansichtsfensters.

Mit diesen Einheiten können Sie ganz einfach Elemente entwerfen, die sich an die Größe des Browserfensters anpassen. Zum Beispiel:

div {
  width: 50vw; /* 50% of the viewport width */
  height: 100vh; /* 100% of the viewport height */
  background-color: lightblue;
}

In diesem Beispiel erstreckt sich das Div über die halbe Breite und die volle Höhe des Ansichtsfensters.

2. Einschränkungen von traditionellem vh und vw

Während vh und vw in den meisten Szenarien gut funktionieren, berücksichtigen sie bestimmte dynamische Änderungen im Ansichtsfenster nicht, wie zum Beispiel:

• Das Erscheinungsbild der Adressleiste des Browsers oder der Navigationssteuerelemente auf Mobilgeräten.
• Änderungen, die durch die Ausrichtung des Geräts oder die Größenänderung des Browserfensters ausgelöst werden.

Diese Einschränkungen können dazu führen, dass Designs inkonsistent erscheinen oder zu unbeabsichtigten Layoutproblemen führen, insbesondere auf Mobilgeräten.

3. Die neuen Viewport-Einheiten: dvh, lvh und svh

Um diese Probleme zu beheben, hat CSS drei neue Einheiten eingeführt: dvh (Dynamic Viewport Height), lvh (Large Viewport Height) und svh (Small Viewport Height).

Dynamische Ansichtsfensterhöhe (dvh)

dvh passt sich dynamisch an Änderungen im Ansichtsfenster an, wie z. B. das Erscheinen oder Verschwinden von Browser-UI-Elementen. Es stellt 1 % der aktuellen Höhe des Ansichtsfensters dar und stellt sicher, dass sich Ihr Layout in Echtzeit anpasst.

Beispiel:

div {
  height: 100dvh; /* Adjusts dynamically to visible viewport height */
  background-color: lightgreen;
}

Dadurch wird sichergestellt, dass das Div immer in den sichtbaren Bereich passt, auch wenn sich die Benutzeroberfläche des Browsers ändert.

Große Ansichtsfensterhöhe (lvh)

lvh stellt 1 % der größtmöglichen Höhe des Ansichtsfensters dar und ignoriert dynamische UI-Änderungen (wie mobile Adressleisten).

Beispiel:

div {
  height: 100lvh; /* Fixed to the maximum viewport height */
  background-color: lightcoral;
}

Dies ist nützlich für Layouts, die unabhängig von Änderungen der Browser-Benutzeroberfläche konsistent bleiben müssen.

Kleine Ansichtsfensterhöhe (svh)

svh stellt 1 % der kleinstmöglichen Höhe des Ansichtsfensters dar und berücksichtigt Szenarien, in denen die Browser-Benutzeroberfläche einen erheblichen Teil des Bildschirms einnimmt.

Beispiel:

div {
  width: 50vw; /* 50% of the viewport width */
  height: 100vh; /* 100% of the viewport height */
  background-color: lightblue;
}

Diese Einheit ist besonders hilfreich, wenn Sie mit Geräten arbeiten, bei denen UI-Elemente wie Tastatur-Popups den sichtbaren Bereich verkleinern können.

4. Breite des Ansichtsfensters (vw)

vw misst 1 % der Breite des Ansichtsfensters. Es bleibt konsistent und wird nicht durch dynamische Änderungen wie Scrollen oder das Erscheinungsbild der Benutzeroberfläche beeinflusst.

Beispiel:

div {
  height: 100dvh; /* Adjusts dynamically to visible viewport height */
  background-color: lightgreen;
}

Dies ist ideal für horizontale Layouts oder Designs in voller Breite.

5. Praktische Anwendungsfälle

So können diese Einheiten in realen Szenarien angewendet werden:

Responsive Hero-Bereich

div {
  height: 100lvh; /* Fixed to the maximum viewport height */
  background-color: lightcoral;
}

Dadurch wird sichergestellt, dass der Heldenbereich immer auf den Bildschirm passt, auch wenn mobile Adressleisten ausgeblendet oder angezeigt werden.

Ganzseitige Modalitäten

div {
  height: 100svh; /* Adjusts to the smallest viewport height */
  background-color: lightgoldenrodyellow;
}

Durch die Verwendung von svh wird sichergestellt, dass das Modal auch dann nutzbar bleibt, wenn die Bildschirmtastatur die Höhe des Ansichtsfensters verringert.

Sticky Footer

div {
  width: 100vw; /* Full viewport width */
  background-color: lightpink;
}

Eine klebrige Fußzeile, die ihre Größe auf verschiedenen Geräten beibehält.

6. Kombinieren von Einheiten für maximale Flexibilität

Sie können diese Einheiten für anpassungsfähigere Designs kombinieren. Zum Beispiel:

.hero {
  height: 100dvh; /* Ensures the hero fits the visible viewport */
  width: 100vw;
  background: url('hero.jpg') no-repeat center center/cover;
}

Dieser Ansatz stellt sicher, dass sich das Design an alle möglichen Ansichtsszenarien anpasst.

7. Browser-Unterstützung

Während vh und vw von allen Browsern weitgehend unterstützt werden, sind dvh, lvh und svh neuere Ergänzungen. Stellen Sie sicher, dass Sie die Browserkompatibilität überprüfen und Fallbacks für ältere Browser bereitstellen.

Fallback-Beispiel:

.modal {
  height: 100svh; /* Accounts for the smallest viewport height */
  width: 100vw;
  overflow-y: auto; /* Allows scrolling if needed */
  background-color: white;
}

8. Fazit

CSS-Ansichtsfenstereinheiten wie vh, vw, dvh, lvh und svh sind leistungsstarke Werkzeuge zum Erstellen reaktionsfähiger und anpassungsfähiger Webdesigns. Während vh und vw die meisten Fälle bewältigen, beheben die neueren dvh-, lvh- und svh-Einheiten Einschränkungen, insbesondere auf mobilen Geräten. Durch das Verständnis und die Nutzung dieser Einheiten können Entwickler mobiler Apps nahtlose, benutzerfreundliche Designs erstellen, die auf allen Geräten und in allen Szenarien funktionieren.

Das obige ist der detaillierte Inhalt vonCSS-Ansichtsfenstereinheiten: CSS-Einheiten *vh (dvh, lvh, svh) und *vw. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!