Höhen- und Breiteneinheiten des Ansichtsfensters in modernem CSS

Da ich immer wieder auf CSS-Codebasen und Theme-Definitionen stoße, die ausschließlich die traditionellen Viewport-Einheiten vh und vw verwenden, habe ich darüber nachgedacht, einen Blog-Beitrag über die leistungsstarken Tools zu schreiben, die uns heutzutage zur Verfügung stehen. Das kann unser Leben einfacher und unseren CSS-Code besser machen.

Die guten alten Viewport-Einheiten

Um es kurz zu machen: Seit vielen Jahren verwenden wir vh und vw, um etwas als Prozentsatz der anfänglichen Höhe und Breite des Ansichtsfensters zu definieren. Wenn wir beispielsweise das gesamte Ansichtsfenster aller Geräte mit Grün füllen möchten, könnten wir Folgendes tun:

.big-fat-green-element {
  background: green;
  height: 100vh;
  width: 100vw;
}

..und das würde wahrscheinlich den Zweck erfüllen. Dies funktionierte jedoch nur so lange zuverlässig, bis aus irgendeinem Grund etwas das sichtbare Ansichtsfenster beeinträchtigte. Beispielsweise verstecken die meisten modernen mobilen Browser einen Teil oder die gesamte Titel- und Adressleiste, sobald der Benutzer mit dem Scrollen der Seite beginnt, was sich auch auf das Darstellungsfenster auswirkt und unser großes, fettes grünes Element weniger groß macht.

Die modernen Viewport-Einheiten

Heutzutage und in den neuesten CSS-Spezifikationen können wir sicher die sogenannten großen, kleinen und dynamischen Ansichtsfenstereinheiten verwenden.

Große Viewport-Einheiten

Die großen Viewport-Prozenteinheiten (lv*) und die standardmäßigen Viewport-Prozenteinheiten (v*) werden in Bezug auf die große Viewport-Größe definiert: die Viewport-Größe unter der Annahme, dass alle UA-Schnittstellen, die dynamisch erweitert und verkleinert werden, verkleinert werden.

Im Wesentlichen geben uns lvh und lvw Einheiten, die wir als Prozentsatz im Verhältnis zum Ansichtsfenster verwenden können, wenn die Browser-Benutzeroberfläche am kleinsten und der Website-Inhalt am größten ist. lvh und lvw geben uns tatsächlich das gleiche Verhalten wie die traditionellen vh- und vw-Einheiten.

Beispiel: Ein Beispiel für die Verwendung der Einheiten lvh und lvw wäre die Definition der Höhe und Breite eines Elements, das als ganzseitiger Hintergrund dienen soll.

/* Full-page background using largest available viewport height and width, regardless of other elements or browser UI state. */
.full-page-background {
  height: 100lvh;
  background: #f51;
  position: fixed;
  top: 0;
  left: 0;
  width: 100lvw;
  z-index: -1; /* Ensure it stays behind other content */
}

Kleine Viewport-Einheiten

Die kleinen Viewport-Prozenteinheiten (sv*) werden in Bezug auf die kleine Viewport-Größe definiert: die Viewport-Größe unter der Annahme, dass alle UA-Schnittstellen dynamisch erweitert und verkleinert werden, um erweitert zu werden.

Mit anderen Worten, svh und svw geben uns Einheiten, die wir verwenden können, um den Bildschirm zu füllen, wenn sich die Browser-Benutzeroberfläche im größten Zustand und der Website-Inhalt im kleinsten Zustand befindet.

Beispiel: Ein gutes Beispiel für die Verwendung der SVH-Einheit wäre die Definition der Höhe einer festen unteren Leiste oder einer statischen Kopfzeile.

/* Header with static height, 10% of the smallest available viewport 
 * e.g. when the browser UI is visible on mobile devices */
.header {
  height: 10svh;
  background-color: #642;
}

Dynamische Viewport-Einheiten

Die dynamischen Viewport-Prozenteinheiten (dv*) werden in Bezug auf die dynamische Viewport-Größe definiert: die Viewport-Größe unter dynamischer Berücksichtigung aller UA-Schnittstellen, die dynamisch erweitert und verkleinert werden.

Die Größen der dynamischen Ansichtsfenster-Prozenteinheiten sind nicht stabil, selbst wenn das Ansichtsfenster selbst unverändert bleibt. Die Verwendung dieser Einheiten kann dazu führen, dass sich die Größe des Inhalts ändert, z. B. während der Benutzer durch die Seite scrollt. Je nach Nutzung kann dies für den Benutzer störend und/oder leistungsintensiv sein.

Obwohl die DVH- und DVW-Einheiten ideal klingen mögen, haben mich die in der obigen Definition genannten Vorbehalte und einige Probleme, die ich bei der Verwendung in Bildlaufelementen hatte, zu dem Schluss geführt, dass wir sie nur in ganz bestimmten Situationen verwenden sollten.

Beispiel 1: Ein Beispiel für die Verwendung von dvh wäre die Definition der Höhe eines Inhaltselements, das sich an Änderungen des Ansichtsfensters anpassen soll.

/* Main content adjusts dynamically. 
 * Since we used dvh the element height will align with the actual viewport and adapt to its changes */
.adjustable-content {
  background-color: #895;
  height: calc(100dvh - 10svh); /* Adjust height considering header */
  overflow: auto;
  padding: 10px;
}

Beispiel 2: Ich hatte diesen Fall letzte Woche, als ein Fehler über ein Formular gemeldet wurde, bei dem das Scrollen konstruktionsbedingt deaktiviert war, während das Formular die volle Höhe und Breite des Ansichtsfensters einnahm. Der Fehler trat auf, wenn sich ein mobiler Benutzer auf eine Eingabe konzentrierte und die Gerätetastatur angezeigt wurde. Dann würde das Formularlayout kaputt gehen. Die Lösung bestand darin, dvh anstelle von vh für die Höhendefinition zu verwenden.

Codepen mit Beispielen

Hier ist endlich ein Codepen, in dem Sie die modernen Viewport-Einheiten in Aktion sehen können. Viel Spaß!

Das obige ist der detaillierte Inhalt vonHöhen- und Breiteneinheiten des Ansichtsfensters in modernem CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!