多设备的Web布局模式-响应式布局技术

时间 2019-11-06

标签设备 web 布局模式响应技术栏目 HTML 繁體版

原文原文链接

经过灵活的栅格和Media Queris，响应式Web设计可以让页面布局适应不一样的屏幕尺寸。随着愈来愈多的设计师采用这个技术，咱们不只看到不少的创新，还看到了一些成形的模式。下面我列出了一些比较热门的适应多设备的布局模式。git

最受欢迎的模式或者就是这种最简单的方式：在更大屏幕使用更大margin的多列布局，依赖于灵活的栅格和图片，在小屏幕中某列内容往下排。github

我把这种模式列为“最灵活”，是由于在不少尺寸的屏幕中，主要布局结构并无很大改变，直到在很小的屏幕当中。这个设计依赖于灵活的栅格来适应不一样的屏幕尺寸。下面是几个使用这种模式的网站示例。web

固然这几个例子有不一样的地方：元素移动的方式不一样、屏幕尺寸划分的不一样等，可是大致上，这种模式有着不少的类似之处。设计

另外一种模式以多列开始，以单列结束，当屏幕尺寸变小，列内容会往下排。不像第一种模式，这种模式的元素大小基本保持不变。orm

各列内容在分辨率临界点有怎样的变化，什么时候变化和如何变化，取决于每一个不一样设计。可是大致上，在窄屏幕中，导航或者主要内容是放在顶部的。如下是这种模式的几个例子：

这种模式尽最大可能地去适应不一样的屏幕尺寸。便是，不一样的布局应用于的大、中、小屏幕当中。由于这原本就花费更多的工做量，因此相比前面两种模式，这个的受欢迎程度稍低。

基于所见的最多见的网站例子，虽然我把这种模式笼统地括入以上的插图，但事实上这种模式是不少创新产生的地方。因此，没有哪一种固定格式能够归纳全部这种模式的设计。看看如下几个例子：

这是最简单的模式，因此也是不经常使用的模式。大概是由于不多公司会有这么简单的网页，内容少而且是单列布局。对于使用这种模式的网站，多设备适应也仅仅是一些关于文本和图片的简单的变化，

插图看起来不是那么有说服力，因此，直接看例子吧：

虽然以上列了几种不一样的模式，可是它们之间仍是有相同的地方。它们都会在小屏幕当中，把内容往下掉，结果是页面很长，包含不少的内容模块。另外可能不太明显的一点，是它们一样地依赖屏幕的空间以调整页面布局。

可是你可能会疑问，这不就是咱们的目的吗？这只不过是，咱们把思想局限在了可视的范围内。实际上，屏幕外的空间老是比屏幕上的空间大得多。好好利用吧！

就如上图所示，Off Canvas模式利用了屏幕外的空间，它把内容或导航隐藏在这里，直到在大屏幕显示或者在小屏幕用户展开它。这种模式出如今一些移动网站和原生的移动App当中。

Facebook的移动Web利用了左边的空间，把导航选项隐藏在这里，直到有人点击连接展开它。在这时候，屏幕外的内容就展现在屏幕当中。有些响应式设计采用了类似的方法，可是其中有些遇到了可访问方面的问题。

Path的原生移动App采用了一种分层技术来建立Off Canvas效果。这个App利用了屏幕的左边和右边来导航。

Tokil Jahnsen建立了 proof-of-concept ，模仿了Path的设计。

Google 的移动版本利用了上面的部分，把导航信息隐藏在此。当用户点击“more”的时候，这些选项从上面滑动到可视区域。

Off Canvas 模式的大致思想是，在小屏幕，除非被点击，附加的元素是被隐藏的。随着屏幕变大，可视部分愈来愈多，直至没有须要展开的元素。若是有人有兴趣用响应式设计思想建立这种模式的网站，请告诉我!

我以为Off Canvas 模式比较有意思，由于它避免用户在小屏幕中滚动屏幕和导航。它把网页的区块进行分离、分标签、按需出现。

与这个相关的话题，Brad Frost 最近对响应式设计导航解决方案作了很好的分类。

原文：Multi-Device Layout Patterns，做者是 Luke Wroblewski