响应式网站做流式布局真的好吗?

在2013年底，切图网接到了第一个响应式布局的网站项目，当时要做响应式布局的网站并不多，项目是台湾的一个客户的，可能是台湾的没有墙的原因吧，可以很容易访问国外很多优秀设计的网站。

当时对响应式做了一些思考，连着这两三年又接手了更多的响应式布局开发项目，总结了自己的一些感悟，想分享出来。

为什么说网页由简单到复杂在回归简单

很多事情即使如此，网页的变迁似乎也遵循了这一条规律，何为响应式布局？最直观的感受，就是当我们拉伸浏览器宽度的时候，网页的内容会发生变化，在现在，这个是要通过css3 media query多媒体查询技术来实现的。

其实，当我们建立一个网页，随便打几行字，插入几个标签，它本身就是一个响应式网页，所以响应式布局的网页，尽可能设计的简单，不要有复杂的结构，这种情况作出的响应式标准效果又好的。

响应式网站就要做流式布局吗？

流式布局就是采用100%宽度来排版网页，这样它是可以自适应不同屏幕宽度的，但是，实际情况是现在网页越来越复杂，结构越来越多样，单单靠100%宽度是解决不了所有问题的。

最终该定宽的还是得定宽，该定高的也得定高，所以，响应式网站并不是采用100%的流式布局，甚至两者没有直接联系。

响应式布局新方法（经过本人大项目项目佐证可行）, 先看看几个案例

流式布局响应式

http://www.qietu.com/html/f1/imirror/

http://www2.qietu.com/html/yinshua/

http://www2.qietu.com/html/ruijiahang/

定宽方式的响应式

http://www4.qietu.com/html/dechi/

http://www.qietu.com/html/qingkonglianyu/

目前很多项目响应式网页都是采用的下面这行定义

<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=yes">

而本人在切图网公司大量的项目中采用了另外一种方法

<meta name="viewport" content="width=480">

然后响应式代码这样写

body{

width:480px; margin:0 auto; overflow:hidden;

}

......

然后再去调整里面元素的细节样式，让它在手机下更好阅读。这是一个很好的方法，并且做出的网页在手机下效果很好。因为它的宽度是固定的，是可控的，编码时候效果是可以直观看到的。

相比于第一种方法，它的宽度很不明确，需要周全的考虑每个宽度下网页每个元素的情况，这不仅需要大量的代码，而且实际情况是很难考虑的那么周全，响应后的效果不好。

定宽的方法我相信有部分人知道，但是没有人敢真正用于在实际项目中，担心它有bug，以及有bug没有解决方案，都随波逐流用了第一种方法，我想说，本着探究的精神，我把这种方法用在大量项目中得到佐证，可行，也遇到过bug不过都解决了。

当然，响应式后的手机端效果不如单独设计手机端，如果客户对效果要求比较高，我通常会建议单独做一个pc版和webapp触屏版，例如像这样

http://www.qietu.com/html/f1/jifuguanjia/

http://www4.qietu.com/html/jifu_wap/

响应式web布局算还是比较新的技术，还有很多待研究的地方，需要我们一起探讨，欢迎加入一起讨论。本人qq/微信：6135833

文/丁向明

做一个有博客的web前端自媒体人！

http://dingxiangming.com