屏幕配置

通过合集保持井井有条 根据您的偏好保存内容并对其进行分类。

在许多方面，自适应网页设计是对手机的一种回应。在智能手机出现之前，很少有人认真考虑网站在手持设备上的外观和感觉。但随着内置 Web 浏览器的手机的迅速崛起，这种情况发生了变化。

自适应网页设计提倡一种质疑假设的思维模式。以前，人们通常假设网站只会显示在台式计算机上，而现在，为手机和平板电脑设计同一个网站已成为标准做法。实际上，移动设备的使用量现在已经超过了网络上的台式机使用量。

这种自适应思维模式将在未来为您提供良好的服务。您的网站完全有可能在今天我们甚至无法想象的设备和屏幕上被查看。这种思维模式甚至超越了屏幕。即使现在，人们也在使用没有屏幕的设备来访问您的内容。如果您使用强大的语义 HTML 基础，语音助手可以使用您的网站。

屏幕世界也在进行实验。今天市场上有一些带有可折叠屏幕的设备。这给您的设计带来了一些挑战。

双屏幕

可折叠设备的用户可以选择让他们的 Web 浏览器仅占用一个屏幕，还是跨越两个屏幕。如果浏览器跨越两个屏幕，则显示的网站将被两个屏幕之间的铰链分隔开。这看起来不太好。

视口分段

有一种实验性的媒体功能旨在检测您的网站是否显示在双屏设备上。提议的媒体功能名称为 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.
}

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

环境变量

viewport-segments 媒体功能本身无法帮助您围绕那个恼人的铰链进行设计。您需要一种了解铰链尺寸的方法。这就是 environment 变量可以提供帮助的地方。

CSS 中的环境变量允许您将笨拙的设备侵入因素纳入您的样式中。例如，您可以使用环境值 safe-area-inset-top、safe-area-inset-right、safe-area-inset-bottom 和 safe-area-inset-left 围绕 iPhone X 上的“刘海”进行设计。这些关键字都包含在 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。

这是一个包含两列布局的示例，其中一列比另一列宽。

@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;
  }
}

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

未来

可折叠显示器会成为下一个热门事物吗？谁知道呢。没有人能够预测移动设备会变得多么流行，因此值得对未来的外形尺寸保持开放的心态。

最重要的是，值得确保您的网站能够响应未来可能带来的任何变化。这就是自适应设计为您提供的：不仅仅是一套实用的技术，更是一种思维模式，它将在您构建未来的网络时为您提供良好的服务。

检查您的理解情况

测试您对屏幕配置的知识