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以获取完整的演示说明。