屏幕配置

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

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

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

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

由不同配置的可折叠手机组成的剪辑。

双屏幕

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

跨越两种屏幕的网站。文本的水平流动被屏幕之间的合页中断。

视口细分

有一个实验性媒体功能,旨在检测您的网站是否正在双屏设备上显示。该媒体地图项的建议名称为 viewport-segments。有两种变体:horizontal-viewport-segmentsvertical-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> 演示视口区段的示意图。
图表来自 Microsoft Edge 说明

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

环境变量

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

借助 CSS 中的环境变量,您可以将尴尬的设备入侵考虑在内。例如,您可以围绕“凹口”在 iPhone X 上使用环境值 safe-area-inset-topsafe-area-inset-rightsafe-area-inset-bottomsafe-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-widthviewport-segment-heightviewport-segment-topviewport-segment-leftviewport-segment-bottomviewport-segment-right

。 <ph type="x-smartling-placeholder">
</ph> 显示双屏幕的环境变量的示意图。
图表来自 Microsoft Edge 说明

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

@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">
</ph> 图表来自 Microsoft Edge 说明文档

未来展望

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

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

检查您的理解情况

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

哪个媒体查询在横屏分屏模式下定位到可折叠设备?

@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)
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1)

什么是环境变量?例如:env(safe-area-inset-top)

包含浏览器专用属性的变量,可用于根据相应浏览器和设备调整网站。
自定义构建时变量。
与用户所在天气有关的变量。
已变为绿色且对环境更安全的变量。