horizontal-viewport-segments

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

实验性： 这是一项实验性技术
在生产中使用此技术之前，请仔细检查浏览器兼容性表格。

horizontal-viewport-segments 是一个 CSS 媒体特性，用于检测设备是否具有指定数量的水平（并排）视口分段。

与视口分段 API 相关，vertical-viewport-segments 特性可用于创建在多视口设备上表现良好的响应式设计——这些设备的显示屏被划分为逻辑上独立的视口分段，例如可折叠或铰链设备。

语法

horizontal-viewport-segments 特性被指定为一个大于或等于 1 的 <integer> 值，表示设备拥有的水平视口分段数量。

以下情况，该值为 1：
- 非可折叠设备（例如，标准单屏智能手机或平板电脑）
- 展开或合上的可折叠设备（处于 continuous 设备姿态）。
- 双屏铰链设备或当前折叠且垂直定向（分段上下堆叠）的可折叠设备。
双屏铰链设备或当前折叠（处于 folded 设备姿态）且水平定向（分段并排）的可折叠设备，该值为 2。
对于具有多个折叠的可折叠设备，该值可能大于 2。

示例

`horizontal-viewport-segments` 基本用法

在此片段中，我们使用 horizontal-viewport-segments 媒体查询来处理分段并排的可折叠设备情况。

我们将左容器的宽度设置为等于左分段宽度（env(viewport-segment-width 0 0)），将右容器的宽度设置为等于右分段宽度（env(viewport-segment-width 1 0)）。

为了计算两个容器之间折叠所占用的宽度，我们从右容器的左边缘偏移量中减去左容器的右边缘偏移量（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);
  }
}

请参阅我们的视口分段 API 演示以获取完整的演示（源代码）。另请查阅使用视口分段 API 以获取完整的演示说明。