`horizontal-viewport-segments` CSS Medienmerkmal

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.

Das horizontal-viewport-segments CSS Medienmerkmal erkennt, ob das Gerät eine angegebene Anzahl von Anzeigebereich-Segmenten hat, die horizontal (nebeneinander) angeordnet sind.

Im Zusammenhang mit der Viewport Segments API kann das Merkmal vertical-viewport-segments verwendet werden, um reaktionsfähige Designs zu erstellen, die gut auf Multi-Viewport-Geräten funktionieren – Geräten mit einer Anzeige, die in logisch separate Anzeigebereich-Segmente unterteilt ist, wie z. B. faltbare oder mit Scharnieren versehene Geräte.

Syntax

Das Merkmal horizontal-viewport-segments wird als <integer>-Wert von 1 oder größer angegeben, der die Anzahl der horizontalen Anzeigebereich-Segmente darstellt, die das Gerät hat.

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

Beispiele

Grundlegende Verwendung von `horizontal-viewport-segments`

In diesem Beispiel verwenden wir eine horizontal-viewport-segments Medienabfrage, um den Fall von faltbaren Geräten zu behandeln, bei denen die Segmente nebeneinander liegen.

Wir setzen den linken Container so, dass er eine Breite hat, die der linken Segmentbreite entspricht (env(viewport-segment-width 0 0)), und den rechten Container so, dass er eine Breite hat, die der rechten Segmentbreite entspricht (env(viewport-segment-width 1 0)).

Um zu berechnen, wie viel Breite der Falz zwischen den beiden einnimmt, ziehen wir den linken Randversatz des rechten Containers vom rechten Randversatz des linken Containers ab (calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));).

css

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

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

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

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

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

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