当您的设备处于垂直折叠姿势且视口并排时，左侧的视口段将由 表示env(viewport-segment-width 0 0)，而右侧的视口段将由 表示env(viewport-segment-width 1 0)。如果您将设备转换为水平折叠姿势，视口堆叠，顶部将由 表示env(viewport-segment-height 0 0)，底部视口由表示env(viewport-segment-height 0 1)。
使用env(viewport-segment-width)andenv(viewport-segment-width)时，除了索引之外，我们还可以设置一个后备值，如下所示：
env(viewport-segment-width 0 0, 100%);
但是这个额外的后备值是可选的，由作者自行决定，如果他们想包含它。
计算铰链宽度当您的设备的铰链被硬件功能遮挡时，您可以使用提供的环境变量来计算它。
我们可以使用环境变量计算设备铰链。
在我们的示例中，我们有一个处于垂直姿势的设备，并且想要找到铰链宽度，这样就不会遮挡任何内容。我们将从左显示器的右视口段中减去右显示器的左视口段：
calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));使用 CSSenv()变量 放置内容
我们可以使用 CSS 环境变量在显示区域边界内放置内容，如果您想将内容直接放置在铰链或折叠处，这些特别有用。
在下面的示例中，我们将在左侧第一个显示区域的铰链上直接放置图像。该区域是视口的右侧部分，因此我们将使用viewport-segment-right以下代码放置它：
img {
max-width: 400px;
}
@media (horizontal-viewport-segments: 2) {
img {
position: absolute;
left: env(viewport-segment-right 0 0);
}
}
如果我们在 Surface Duo 模式下在 Edge 开发人员工具中模拟我们的屏幕，我们将获得以下布局：
最初使用环境变量将图像放置在我们的布局中会将其放置在错误的显示区域中。
这不是我们想要的。图像应位于左侧的显示区域中。
因为图像是使用属性绝对定位的left，所以图像的左边缘最终与viewport-segment-right显示区域对齐。
然后，我们需要从环境变量中减去图像的宽度，以使图像与正确的铰链边缘对齐：
img {
max-width: 400px;
}
@media (horizontal-viewport-segments: 2) {
img {
position: absolute;
left: calc(env(viewport-segment-right 0 0) - 400px);
}
}
从视口段中减去图像宽度会将其沿左侧显示中的铰链放置。
现在我们将图像放置在我们想要的位置。有关如何沿铰链对齐项目的其他示例，您可以查看这个简单的盒子演示。打开Edge Developer Tools>Device Emulation然后选择Surface Duo并确保您Duo emulation处于校正方向姿势。
把它们放在一起：让我们构建一个适应双屏设备的食谱页面作为一个在做饭时经常使用手机的人，当我在我的双屏设备上时会适应的食谱网站会非常有帮助。让我们来看看如何考虑为它调整一个单独的食谱页面。
我想考虑我将如何分块我的主要内容。通常情况下，我至少会看到食谱标题、制作的份量、烹饪需要多长时间、一张或多张图片、配料以及制作菜肴的步骤。
当我画出我的线框时，我得到以下信息：
