浅谈济南网站建设响应式网站做流式布局

发表时间:2015-09-08 09:21    责任编辑:莫都晨晓    浏览:
大陆最先出现响应式布局网站建设这个概念还是在2013年左右,当时大陆做这种类型的网站很少。这种响应式布局网站还是从台湾流行过来的。由于台湾的网络没有墙,可以看到很多国外的创意、设计、代码比较先进优秀的网站,从而引用的他们的设计理念,然后一步步传到中国大陆。
近些年晨晓网也接了一些客户要求相应式布局的案例,所以根据近几年的经验,想跟大家分享一下做相应式布局的感悟。
一、网站建设从简单到复杂,再回归到简单。
世间万物演变规律皆是如此,网站建设也遵循了这一条规律,何为响应式布局?最直观的感受,就是当我们拉伸浏览器宽度的时候,网页的内容会发生变化,在现在,这个是要通过css3 media query多媒体查询技术来实现的。
响应式布局网站建设
响应式布局的网页,要尽可能设计的简单,不要有复杂的结构,这种情况作出的响应式标准效果又好的。

二、响应式网站就要做流式布局吗?
响应式网站建设不只是采用100%的宽度来排版网页,实际情况我们设计一个网页的排版往往有些复杂多样,单靠100%宽度是不行的。

目前很多项目响应式网页都是采用的下面这行定义
<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触屏版

15063366547
286601999
微信咨询