响应式网页设计在很多方面都是对手机的反应。在智能手机出现之前，很少有人仔细考虑网站在手持设备上的外观和风格。随着内置网络浏览器的手机的迅猛发展，这一改变已然改变。
响应式网页设计鼓励了人们对各种假设提出质疑的心态。以前，人们常常假定一个网站只能通过桌面设备查看，现在，将同一个网站也设计在手机和平板电脑上是一种标准做法。事实上，移动设备的使用现已超越桌面设备，
这种反应敏捷的心态将有助于您迎接未来。如今，用户在浏览您的网站时，完全有可能在多台设备和屏幕上浏览您的网站，这是完全无法想象的。这种心态并不局限于屏幕。即便如此，人们也在使用无屏幕的设备访问您的内容。如果您使用了坚实的语义 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.
}
如果 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">
现在，您的页面布局将占据整个视口，并使用设备提供的边衬区值安全地填充文档。
对于可折叠屏幕，提供了 6 个新的环境变量：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;
}
}
把双屏视为机会。或许，一个屏幕可用于显示可滚动的文本内容，而另一个屏幕用于显示图像或地图等固定元素。
未来展望
可折叠显示屏是否会成为下个热点？谁知道呢。没有人能够预测到移动设备会变得多么受欢迎，因此对未来的外形规格保持开放的心态是值得的。
最重要的一点是，确保您的网站能够应对未来可能带来的任何变化。这正是响应式设计带给您的特点：您不仅仅是一套实用技巧，也是一种思维方式，能够在您构建未来的网络时为您提供优质服务。
检查您的掌握程度
测试您对屏幕配置知识的掌握情况
哪个媒体查询针对处于分屏横屏模式的可折叠设备？
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1)@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1)@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 2)@media (vertical-viewport-segments: 1) and (horizontal-viewport-segments: 1)什么是环境变量？例如 env(safe-area-inset-top)