响应式布局的5种模式以及不用响应式布局的理由

 

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念可以说是是为移动互联网而生的！

Responsive Web Design可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。下面我列出了一些比较热门的适应多设备的布局模式。

最灵活的（Mostly Fluid）

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

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

• Five Simple Steps

• Princess Elisabeth Antarctica.

• Trent Walton

• Sifter

• ChoiceResponse

当然这几个例子有不同的地方：元素移动的方式不同、屏幕尺寸划分的不同等，但是大体上，这种模式有着很多的相似之处。

列内容往下排（Column Drop）

另一种模式以多列开始，以单列结束，当屏幕尺寸变小，列内容会往下排。不像第一种模式，这种模式的元素大小基本保持不变。分享一个最好用的UI前端框架！

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

• Modernizr

• Owltastic

• Wee Nudge

• Festival de Saintes

• Ash Personal Training

布局切换（Layout Shifter）

这种模式尽最大可能地去适应不同的屏幕尺寸。即是，不同的布局应用于的大、中、小屏幕当中。因为这本来就花费更多的工作量，所以相比前面两种模式，这个的受欢迎程度稍低。

基于所见的最常见的网站例子，虽然我把这种模式笼统地括入以上的插图，但事实上这种模式是很多创新产生的地方。所以，没有哪种固定格式可以概括所有这种模式的设计。看看以下几个例子：分享一个最好用的UI前端框架！

• Food Sense

• Performance Marketing Awards

• Forefathers Group

• The Boston Globe

• Andersson-Wise Architects

最简单（Tiny Tweaks）

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

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

• Future Friendly

• Path

• Neovada

• Lycos

• Design made in Germany

屏幕以外的空间利用（Off Canvas）

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

但是你可能会疑问，这不就是我们的目的吗？这只不过是，我们把思想局限在了可视的范围内。实际上，屏幕外的空间总是比屏幕上的空间大得多。好好利用吧！分享一个最好用的UI前端框架！

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

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

• Barack Obama

• Kaemingk Christmas 2012

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

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

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

Off Canvas 模式的大体思想是，在小屏幕， 除非被点击 ，附加的元素是被隐藏的。随着屏幕变大，可视部分越来越多，直至没有需要展开的元素。

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

响应式布局现在看来做前端的同学都要开始更深入的研究了吧。但在一些情况下也有不响应的理由。

4个理由不响应

1。响应设计，增加了开发时间超过预算

想想原本做前端开发苦逼的工程师就要兼容多浏览器的兼容，还要和ie斗个你死我活的，现在又要兼容多平台。要知道相同系统下的，不同浏览器显示效果不一样、要知道不同系统下的，相同浏览器显示效果不一样、要知道不同系统下的，同样的浏览器显示效果不一样，要知道不同系统下的，不同浏览器显示效果根本不可能一样。现在好了多了一分辨率这个变量。那工作量和成本是不是成阶增长的，我想只有你自己才知道了。

2。移动用户的需求和桌面用户不同。分享一个最好用的UI前端框架！

在大多数情况下，一个移动端的网站展示内容，往往仅仅是压缩它的桌面对应版本。这样就造成了一个问题,内容不变，但区域小了。大量的内容挤进一个很小的容器页，当然这些内容是可以垂直向下显示的。但大量的信息，并不是移动用户所必须的，他们没有时间来查看这堆信息。就像人们更喜欢在移动端使用微博而不是使用博客一个道理。

3。响应网站的可用性变差

差的可用性可能说的又点主观，但确实有类似的实例。

很多时候我想查用ipod看自己博客的时候，都会先进入移动版，但我很快发现，移动版里有很多信息不能直观的看到。然后我会很快的切换到桌面版。因为一样大小的页面显示更多的信息，并且方便放大缩小的操作也很方便，这些已经让移动版的简洁显得并不那么重要了。顺便吐下槽，ipod丢了3个多月了。呜呜….

4。响应网站往往有不必要的加载时间。

响应式设计一个目前的实现趋势是，工程师往往隐藏页面的元素使页面内容减小，以达到减少内容的目的，但这样做并不是最好的方法，隐藏的图像仍然加载，桌面版本的所有脚本也都会加载，加载的文件大小和时间并不减少，但可视的内容却少了。这样算是不是很不划算那。而且国内的3G流量费用贵的吓死人，看个网站就把流量用光了，不知道用户会选择选择更高的套餐来使用你的网站那，还是选择不使用的网站那。我想结果显然易见。分享一个最好用的UI前端框架！

任何事没有绝对的对与错，技术也一样，从不同的角度看就有不一样的结果。做的越多也就错的越多。这也是一个不争的事实。在这个过程中，前端开发的朋友们，还是要根据公司的要求来自行决定布局的选取才是关键。我是支持响应式设计的，但同样认为它有一些弊端和实际应用的问题，也些问题也阻止了响应式布局在这些项目上的应用。最后送一句话，用不用你说的算。好不好，客户说的算。