如果你是设计师、程序员或DIV+CSS布局人员,并关注了最近几年的网站设计,那么响应式布局(responsive layout)设计对于你来说一定不是一个陌生的词汇。 相对于传统的网站设计来说,今天的设计者需要考虑的用户来源和用户体验对于设计者来说是一个非常大的挑战,因为随着硬件的更新,新设备的出现,你需要能够使得你的网站能够针对不同的硬件做出最好显示响应。
一、什么是响应式布局?
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。
二、响应式布局有哪些优点和缺点?
优点:
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点:
兼容各种设备工作量大,效率低下
代码累赘,会出现隐藏无用的元素,加载时间加长
其实这是一种折衷性质的设计解决方案,多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构,会出现用户混淆的情况
三、响应式布局当前使用现状?
响应式设计听起来非常理想,但其技术实现则困难重重,因为响应式设计并不仅仅包含设计本身,还包含实现,更进一步讲,实现原理固然简单,但要考虑到开发成本、性能、可维护性方面则又是充满了挑战。比如说,我们都知道使用MediaQuery来实现CSS去适配各式终端,但MediaQuery应当从高分辨率还是往低适配还是从低分辨率往高适配?容器样式使用MediaQuery来作适配,那么布局是不是也适合用MediaQuery作适配?加入MediaQuery适配后的页面体积增加了,如何在小屏幕终端里降低页面体积?带有复杂交互的组件如何作适配?MediaQuery增加了代码复杂度降低了可维护性,如何让MediaQuery来适应变化频繁的被运营的Web页面?由于这些问题的存在,当前响应式布局使用的网站并不是特别多,就说所有,淘宝、京东实现了一部分。苏宁实现了一个首页。
所以总得来说,响应式布局技术任重而道远。尚道互动将会继续关注此项技术的最新发展,并希望能应用到我们的南京网站建设、南京网站设计工作中去,我们一起期待吧。