`vertical-viewport-segments` CSS-Media-Feature

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die vertical-viewport-segments CSS Media-Feature erkennt, ob das Gerät eine bestimmte Anzahl von Viewport-Segmenten hat, die vertikal (von oben nach unten) angeordnet sind.

Im Zusammenhang mit der Viewport Segments API kann die vertical-viewport-segments-Funktion genutzt werden, um responsive Designs zu erstellen, die auf Geräten mit mehreren Viewports gut funktionieren — Geräten, deren Display in logisch getrennte Viewport-Segmente unterteilt ist, wie faltbare oder scharnierartige Geräte.

Syntax

Die vertical-viewport-segments-Funktion wird als ein <integer>-Wert von 1 oder größer angegeben, der die Anzahl der vertikalen Viewport-Segmente des Geräts darstellt.

Der Wert wird 1 sein für:
- Ein nicht faltbares Gerät (zum Beispiel ein Standard-Smartphone oder -Tablet mit einem Bildschirm).
- Ein faltbares Gerät, das entweder entfaltet oder geschlossen ist (in der continuous-Gerätestellung).
- Ein zweibildschirmiges Scharniergerät oder ein faltbares Gerät, das derzeit gefaltet ist und horizontal orientiert ist, sodass die Segmente nebeneinander liegen.
Der Wert wird 2 sein für ein zweibildschirmiges Scharniergerät oder ein faltbares Gerät, das derzeit gefaltet ist (in der folded-Gerätestellung) und vertikal orientiert ist, sodass die Segmente übereinander liegen.
Der Wert kann größer als 2 sein für faltbare Geräte mit mehr als einem Faltpunkt.

Beispiele

Grundlegende Nutzung von `vertical-viewport-segments`

In diesem Beispiel verwenden wir eine vertical-viewport-segments-Media-Query, um den Fall von faltbaren Geräten zu behandeln, bei denen die Segmente von oben nach unten angeordnet sind.

Wir setzen den oberen Container so, dass er eine Höhe entsprechend der Höhe des oberen Segments hat (env(viewport-segment-height 0 0)), und den unteren Container so, dass er eine Höhe entsprechend der Höhe des unteren Segments hat (env(viewport-segment-height 0 1)).

Um zu berechnen, wie viel Höhe der Faltbereich zwischen den beiden einnimmt, subtrahieren wir den unteren Randversatz des oberen Containers vom oberen Randversatz des unteren Containers (calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0));).

css

.wrapper {
  height: 100%;
  display: flex;
}

@media (vertical-viewport-segments: 2) {
  .wrapper {
    flex-direction: column;
  }

  .list-view {
    height: env(viewport-segment-height 0 0);
  }

  .fold {
    width: 100%;
    height: calc(
      env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0)
    );
    background-color: black;
  }

  .detail-view {
    height: env(viewport-segment-height 0 1);
  }
}

Sehen Sie sich unser Viewport-Segment-API-Demo für eine vollständige funktionierende Demo an (Quellcode). Schauen Sie sich auch Using the Viewport Segments API für eine vollständige Demo-Erklärung an.