屏幕配置

自适应设计从很多方面来说都是对手机的反应。在智能手机出现之前，很少有人认真考虑网站在手持设备上的外观和风格。随着具有内置网络浏览器的手机迅速崛起，这种情况发生了变化。

自适应设计鼓励一种质疑假设的思维方式。以前，人们常常会认为用户只能在桌面设备上浏览网站，而现在，网站已成为针对手机和平板电脑设计同一网站的标准做法。事实上，移动设备的使用率现在已经超过了桌面设备。

这种反应迅速的心态将在未来助您一臂之力。用户访问您的网站时，他们使用的设备和屏幕完全有可能，我们现在完全无法想象。这种思维模式并不局限于屏幕。时至今日，人们仍在使用没有屏幕的设备访问您的内容。如果您使用的是坚实的语义 HTML 基础，语音助理就可以使用您的网站。

屏幕世界也在不断实验。如今市场上已有很多配备可折叠屏幕的设备。这会给您的设计带来一些挑战。

双屏幕

可折叠设备的用户可以选择是希望网络浏览器仅占据其中一个屏幕，还是跨越两个屏幕。如果浏览器跨越两个屏幕，那么展示中的网站会被两个屏幕之间的合页分开。看起来不妙。

视口细分

有一个实验性媒体功能，旨在检测您的网站是否正在双屏设备上显示。该媒体地图项的建议名称为 viewport-segments。有两种变体：horizontal-viewport-segments 和 vertical-viewport-segments。

如果 horizontal-viewport-segments 媒体功能报告的值为 2，而 vertical-viewport-segments 报告的值为 1，则表示设备上的合页从上到下延伸，会将您的内容分成两个并排的面板。

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  // Styles for side-by-side screens.
}

如果 vertical-viewport-segments 媒体功能报告的值为 2，而 horizontal-viewport-segments 报告的值为 1，则合页会左右移动，将内容分成两个面板，一个在另一个上。

@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1) {
  // Styles for stacked screens.
}

<ph type="x-smartling-placeholder">

</ph>

如果 vertical-viewport-segments 和 horizontal-viewport-segments 报告的值均为 1，则表示即使设备有多个屏幕，网站也只会显示在一个屏幕上。这相当于不使用任何媒体查询。

环境变量

viewport-segments 媒体功能本身无法帮助您围绕这个烦人的合页进行设计。您需要一种方法来知道合页的尺寸。这正是环境变量可以发挥作用的地方。

借助 CSS 中的环境变量，您可以将尴尬的设备入侵考虑在内。例如，您可以围绕“凹口”在 iPhone X 上使用环境值 safe-area-inset-top、safe-area-inset-right、safe-area-inset-bottom 和 safe-area-inset-left。这些关键字封装在 env() 函数中。

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

环境变量的工作方式与自定义属性类似。这意味着，如果环境变量不存在，您可以传入后备选项。

body {
  padding-top: env(safe-area-inset-top, 1em);
  padding-right: env(safe-area-inset-right, 1em);
  padding-bottom: env(safe-area-inset-bottom, 1em);
  padding-left: env(safe-area-inset-left, 1em);
}

如需让这些环境变量在 iPhone X 上正常运行，请更新用于指定 viewport 信息的 meta 元素：

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

现在，您的页面布局将占据整个视口，并使用设备提供的边衬值安全地填充文档。

对于可折叠屏幕，建议使用六个新的环境变量：viewport-segment-width、viewport-segment-height、viewport-segment-top、viewport-segment-left、viewport-segment-bottom 和 viewport-segment-right。

。 <ph type="x-smartling-placeholder">

</ph> 。

下面是一个包含两列（一列宽于另一列）的布局示例。

@media (min-width: 45em) {
  main {
    display: flex;
    flex-direction: row;
  }
  main article {
    flex: 2;
  }
  main aside {
    flex: 1;
  }
}

对于采用垂直合页的双屏幕，请将第一列设置为第一个屏幕的宽度，将第二列设置为第二个屏幕的宽度。

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  main article {
    flex: 1 1 env(viewport-segment-width 0 0);
  }
  main aside {
    flex: 1;
  }
}

将双屏幕视为一个机会。或许，一个屏幕可用于显示可滚动文本内容，而另一个屏幕可用于显示固定元素，例如图片或地图。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

未来展望

可折叠设备会成为下一个主流吗？谁知道呢。没有人能预料到移动设备会变得如此流行，因此对于未来的设备类型保持开放心态是值得的。

最重要的是，您需要确保您的网站能够针对未来可能带来的任何变化做出响应。这正是响应式设计带给您的：它不仅仅是一套实用技巧，更是让您构建未来网络时有利的思维方式。

检查您的理解情况

测试您对屏幕配置知识的掌握情况