vertical-viewport-segments

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

實驗性： 這是一項實驗性技術
在生產中使用此技術之前，請仔細檢查瀏覽器相容性表格。

vertical-viewport-segments CSS 媒體特性用於檢測裝置是否具有指定數量的垂直（從上到下）佈局的視口分段。

與視口分段 API 相關，vertical-viewport-segments 特性可用於建立在多視口裝置上（即顯示屏被分成邏輯上獨立視口分段的裝置，例如可摺疊或鉸鏈裝置）執行良好的響應式設計。

語法

vertical-viewport-segments 特性指定為一個大於等於 1 的<integer> 值，表示裝置具有的垂直視口分段數量。

以下情況，該值為 1：
- 不可摺疊裝置（例如，標準單屏智慧手機或平板電腦）。
- 展開或閉合的可摺疊裝置（處於continuous 裝置姿態）。
- 雙屏鉸鏈裝置或當前摺疊並水平定向的可摺疊裝置，使得分段並排顯示。
以下情況，該值為 2：雙屏鉸鏈裝置或當前摺疊（處於folded 裝置姿態）並垂直定向的可摺疊裝置，使得分段上下堆疊。
對於具有多個摺疊的可摺疊裝置，該值可能大於 2。

示例

`vertical-viewport-segments` 基本用法

在此程式碼段中，我們使用 vertical-viewport-segments 媒體查詢來處理分段從上到下的可摺疊裝置。

我們將頂部容器的高度設定為等於頂部段的高度 (env(viewport-segment-height 0 0))，將底部容器的高度設定為等於底部段的高度 (env(viewport-segment-height 0 1))。

為了計算兩個容器之間摺疊佔據的高度，我們將底部容器的頂部邊緣偏移量減去頂部容器的底部邊緣偏移量 (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);
  }
}

請參閱我們的視口分段 API 演示以獲取完整的可執行演示（原始碼）。另請檢視使用視口分段 API以獲取完整的演示說明。