vertical-viewport-segments

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

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

Verwandt mit der Viewport Segments API, kann das vertical-viewport-segments-Feature verwendet werden, um responsive Designs zu erstellen, die gut auf Multi-Viewport-Geräten funktionieren – Geräte mit einem Display, das in logisch getrennte Viewport-Segmente unterteilt ist, wie zum Beispiel faltbare oder scharnierartige Geräte.

Syntax

Das vertical-viewport-segments-Feature wird als <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ätehaltung).
- Ein Gerät mit zwei Bildschirmen oder ein faltbares Gerät, das derzeit gefaltet ist und horizontal so ausgerichtet ist, dass die Segmente nebeneinander liegen.
Der Wert wird 2 sein für ein Gerät mit zwei Bildschirmen oder ein faltbares Gerät, das derzeit gefaltet ist (in der folded Gerätehaltung) und vertikal so ausgerichtet ist, dass die Segmente übereinander liegen.
Der Wert kann größer als 2 sein für faltbare Geräte mit mehr als einem Falz.

Beispiele

Grundlegende Verwendung 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 hat, die der Höhe des oberen Segments entspricht (env(viewport-segment-height 0 0)), und den unteren Container so, dass er eine Höhe hat, die der Höhe des unteren Segments entspricht (env(viewport-segment-height 0 1)).

Um zu berechnen, wie viel Höhe der Falz 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 unsere Viewport-Segment-API-Demo für eine vollständige funktionsfähige Demo an (Quellcode). Schauen Sie sich auch Die Viewport-Segments-API verwenden für eine vollständige Demo-Erklärung an.