当前位置:首页 » 前端, 设计 » 本页

概谈一下响应式网站设计及响应式前端框架 In 前端, 设计  @2014-06-25 3,178 Vs

rdw

响应式网站百科里是这么解释的:响应式Web设计(Responsive Web design)的理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局。

如今的互联网已经不再是以前的单纯的Table Div时代,更具意义的标签,更易于搜索、更易于渲染、更个性化的制作、更具设备兼容性的Html5及Css3时代已经让响应式网站普及。

响应式网站的诸多优点让它已经成为了新一代设计的标准,在任何设备里只呈现一个制作方案,却可以实现不同的外观及体验度。一次性网站的开发实现多用途的方案。

但同样响应式网站也是有代价的,就目前来说,浏览器的问题还是很大的,尤其是IE下面,IE9以上才支持,所以我们在做这个网站时不得不衡量一下我们的用户群里哪一些,值不值得使用;

同样还有一个需要注意的就是开发成本问题,响应式网站开发的周期是明显多于普通网站的开发时间,这就意味着,人力成本及交付时间都会增长;

总结一句,根据需求进行选择。

 

入正题吧,此文章只概述一下响应式网站设计方法及响应式前端框架的使用方法

 

前篇(视觉角度)

从视觉角度来讲响应式网站的设计方式其实跟普通网站是没有多大区别的,用最通俗的话来讲就是版式更宽,图片更大,同时代价就是加载更慢,对设计人员要求更高;

在出设计稿的时候我们就更要注重前端实现了,通栏,图片适应,图片隐藏等等

而对于小屏的设备来说,就是精简一些视觉图案,切换图片等JS的使用。因为小屏幕的设备相对于页面的加载速度和渲染方法都较PC不太一样。

所以设计师需要了解更多的前端实现知识,才能更容易的制作出符合响应式网站的要求,比如一个图片要多大,在小屏幕里要多大,以什么方式适应,是该隐藏呢还是用别人的图片替换。

又或者这一部份在大屏(相对)上是显示,在小屏上是隐藏或缩小篇幅;在大屏上以展开方式,在小屏上以合并的方式等等

这些都是视觉设计时候需要考虑衡量的问题,更重要的是需要与前端开发好好的沟通,这是留给设计师们的了

 

后篇(前端实现)

有了设计图,先需要与设计师好好沟通一下,在PC大屏上是什么效果,在小屏上是什么效果,这个一定要先明白,不然写代码是相当的辛苦的

看到网站很多说响应式网站的写法的,都有一个共同的优点就是从小屏写到大屏上去,这样写可以少很多代码,具体的呢,相信有经验的朋友就知道了。一般写区域控制的CSS是使用 min-width 而不会max-width

从小屏的基础代码写起,刚写的时候没有完全的必要把精度控制得很严谨。Width一般都使用百分比,margin\font-size\height\line-height等单位使用rem或 em(较少使用),这rem单位可以继承上一个父项的字体大小,更易于控制,也是响应式网站的一个重要的地方

写响应式的代码是需要耐心的,理顺逻辑写起来就很快了,但终归还是比较慢的,尤其是要兼容性等问题;

下面就引出响应式框架的问题了,很多写响应式网站的一般都会在响应式前端框架上来制作,这样及方便也更快速,网站的响应式框架就很多了,在搜索引擎上搜一下就有了

SkeletonFoundation (这个我用的比较多)、 Golden Grid SystemMQFramework 、HTML5 Boilerplate   等等。具体的用法就在这里说了,他们的官网都有详细介绍

至于响应式网站的实例可以查看 响应式Web设计:50实例与实践

用响应式前端框架当然也有一定的风险及弊端了。风险在于一些漏洞了,弊端就是代码不规范或者体积比较大,毕竟这个是功能很完善的框架,而我们可能需要的并不是那么多,所以在网站性能上可能会有点拖慢,所以最好的就是在允许的条件下自行开发,根据需要开发适合自己网站的代码

响应式网站并不是什么高级的东西,我们需要的是想法,灵活变化,响应式网站也并不是所有网站都适合的,需求决定!



↓↓↓ 支持我们 ↓↓↓



我说两句 »

Ctrl+Enter

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。
返回顶部