扫描关注网站建设微信公众账号

扫一扫微信二维码

响应式布局的设计思路,免费的在线测试工具

计世科技2015-04-29经验之谈

什么是响应式布局?

响 应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简单来说,就是让网站能够兼容多个终端设备,例如PC电脑、Pad平板、各种手机,或是未来的谷歌 glass、苹果iWatch等,不论横屏或竖屏状态,网站都可以完美显示,而不是每个终端都单独制作一个版本。

响应式布局概念提出之后,很快便在全球范围内形成了一种网站设计趋势,计世科技也对其设计理念和制作技术进行了深入的研究和实践,并将其应用于自身的官方网站建设当中 ( jisch.com ) ,下面就与大家分享下响应式布局的设计思路。

响应式布局的设计思路

在 以前的网站制作过程中,调试各种浏览器兼容性已经给设计者们带来了很大的困扰,现在又要加上各种屏幕的兼容测试,这不是让人崩溃的节奏吗?但是,有需求就 会有解决方案,CSS3媒体查询 ( Media Query ) 技术的诞生解决了这个难题,我们通过这种技术可以轻松地判断设备屏幕尺寸,并根据不同的尺寸调整布局方式,从而实现了兼容多种终端设备的需求。

在进行响应式布局设计时,我们首先要明确网站用户的主要终端来源,如果是移动端为主,则采用“手机屏优先”的设计方案,如果是使用PC电脑为主,则采用“宽屏优先”的设计方案,不能一味地认为响应式布局就是专门为移动建站而设计的。

以 “手机屏优先”为例来说,我们可以将竖屏和横屏模式进行区分布局,从最小屏幕依次至最大屏幕进行布局规划:iphone4、iphone5、 iphone6、iphone6 plus、mini ipad、ipad、PC小屏、PC宽屏。当然也可以根据需求情况,调整或合并一些屏幕的布局方式,至于三星、小米等手机或Pad屏幕,实际上与苹果系列 的屏幕规格基本一致,布局也不会出现偏差,所以我们建议大家不妨就做个果粉吧。

免费的响应式布局在线测试工具
http://www.jisch.com/a/test/

响应式布局的发展前景

在目前的市场上,IE9以下版本的浏览器不支持响应式布局,而Chrome ( 谷歌 )、Firefox ( 火狐 )、Safari ( 苹果 )、包括国内的搜狗、360等浏览器已全面支持了响应式布局。

虽然在中国依然有大量的IE8用户存在,但我们看到,全球化的技术进程将很快淘汰低版本浏览器。在未来,这些用户将不得不升级自己的浏览器版本,以获得更好的体验。就连一直以来都我行我素的IT大鳄微软,也只能跟随这种趋势,在其IE的升级版本中加入对响应式布局的支持。

我们在《前瞻2015全球网站设计趋势》一文中就提到,响应式布局将席卷各种互联网,今后它将不再是一种网站设计趋势,而是一种常态,这是大势所趋。

文章关键词