horizontal-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 horizontal-viewport-segments CSS Medienmerkmal erkennt, ob das Gerät eine bestimmte Anzahl an Viewport-Segmenten aufweist, die horizontal (nebeneinander) angeordnet sind.

Das mit der Viewport Segments API verwandte Feature vertical-viewport-segments kann verwendet werden, um responsive Designs zu erstellen, die gut auf Mehr-Viewport-Geräten funktionieren — Geräte mit einem Display, das in logisch getrennte Viewport-Segmente unterteilt ist, wie z.B. faltbare oder geklappte Geräte.

Syntax

Das Merkmal horizontal-viewport-segments wird als ein <integer> Wert von 1 oder größer spezifiziert und repräsentiert die Anzahl der horizontalen Viewport-Segmente, 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äthaltung).
- Ein zweischirmiges geklapptes Gerät oder ein derzeit gefaltetes faltbares Gerät, das vertikal orientiert ist, sodass die Segmente übereinander liegen.
Der Wert wird 2 sein für ein zweischirmiges geklapptes Gerät oder ein derzeit gefaltetes faltbares Gerät (in der folded-Geräthaltung), das horizontal orientiert ist, sodass die Segmente nebeneinander liegen.
Der Wert kann größer als 2 sein für faltbare Geräte mit mehr als einem Knick.

Beispiele

Grundlegende Verwendung von `horizontal-viewport-segments`

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

Wir setzen den linken Container auf eine Breite, die der Breite des linken Segments entspricht (env(viewport-segment-width 0 0)), und den rechten Container auf eine Breite, die der Breite des rechten Segments entspricht (env(viewport-segment-width 1 0)).

Um zu berechnen, wie viel Breite der Knick zwischen den beiden einnimmt, subtrahieren wir den linken Randversatz des rechten Containers vom rechten Randversatz des linken Containers (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 unsere 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.