自适应设计从很多方面来说都是对手机的反应。在智能手机出现之前,很少有人认真考虑网站在手持设备上的外观和风格。随着具有内置网络浏览器的手机迅速崛起,这种情况发生了变化。
自适应设计鼓励一种质疑假设的思维方式。以前,人们常常会认为用户只能在桌面设备上浏览网站,而现在,网站已成为针对手机和平板电脑设计同一网站的标准做法。事实上,移动设备的使用率现在已经超过了桌面设备。
这种反应迅速的心态将在未来助您一臂之力。用户访问您的网站时,他们使用的设备和屏幕完全有可能,我们现在完全无法想象。这种思维模式并不局限于屏幕。时至今日,人们仍在使用没有屏幕的设备访问您的内容。如果您使用的是坚实的语义 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
媒体功能本身无法帮助您围绕这个烦人的合页进行设计。您需要一种方法来知道合页的尺寸。这正是环境变量可以发挥作用的地方。
借助 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
。
下面是一个包含两列(一列宽于另一列)的布局示例。
@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">未来展望
可折叠设备会成为下一个主流吗?谁知道呢。没有人能预料到移动设备会变得如此流行,因此对于未来的设备类型保持开放心态是值得的。
最重要的是,您需要确保您的网站能够针对未来可能带来的任何变化做出响应。这正是响应式设计带给您的:它不仅仅是一套实用技巧,更是让您构建未来网络时有利的思维方式。
检查您的理解情况
测试您对屏幕配置知识的掌握情况
哪个媒体查询在横屏分屏模式下定位到可折叠设备?
@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)