响应式网页设计在很多方面都是对手机的反应。在智能手机出现之前,很少有人仔细考虑网站在手持设备上的外观和风格。随着内置网络浏览器的手机的迅猛发展,这一改变已然改变。
响应式网页设计鼓励了人们对各种假设提出质疑的心态。以前,人们常常假定一个网站只能通过桌面设备查看,现在,将同一个网站也设计在手机和平板电脑上是一种标准做法。事实上,移动设备的使用现已超越桌面设备,
这种反应敏捷的心态将有助于您迎接未来。如今,用户在浏览您的网站时,完全有可能在多台设备和屏幕上浏览您的网站,这是完全无法想象的。这种心态并不局限于屏幕。即便如此,人们也在使用无屏幕的设备访问您的内容。如果您使用了坚实的语义 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)