什么是响应式布局？

响 应式布局是(shi)Ethan Marcotte在2010年5月(yue)份提出的一(yi)个(ge)概念(nian)，简单(dan)来(lai)说，就(jiu)是(shi)让网站能够(gou)兼容多个(ge)终端(duan)设备(bei)，例(li)如PC电脑、Pad平板(ban)、各种手机，或是(shi)未来(lai)的谷歌 glass、苹果iWatch等，不论横屏或竖屏状态，网站都可以显(xian)示，而(er)不是(shi)每(mei)个(ge)终端(duan)都单(dan)独制作一(yi)个(ge)版本(ben)。

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

响应式布局的设计思路

在(zai) 以前的(de)(de)网站制作过程中，调试各种(zhong)浏(liu)览器兼(jian)容(rong)性已(yi)经(jing)给设计者(zhe)们带来了(le)很大的(de)(de)困扰，现(xian)(xian)在(zai)又要(yao)加上各种(zhong)屏幕(mu)的(de)(de)兼(jian)容(rong)测试，这(zhei)不(bu)是(shi)(shi)让人崩溃的(de)(de)节奏吗(ma)？但是(shi)(shi)，有需求就 会有解决(jue)(jue)方案，CSS3媒体查询 ( Media Query ) 技术的(de)(de)诞生解决(jue)(jue)了(le)这(zhei)个难题(ti)，我们通过这(zhei)种(zhong)技术可以轻松地(di)判断设备屏幕(mu)尺寸(cun)，并根据不(bu)同的(de)(de)尺寸(cun)调整布局方式，从而(er)实(shi)现(xian)(xian)了(le)兼(jian)容(rong)多(duo)种(zhong)终端设备的(de)(de)需求。

在进行响应式布局设计，我(wo)们(men)首(shou)先(xian)(xian)要明确网站用(yong)(yong)户的(de)主(zhu)要终(zhong)端来源，如果是(shi)移动(dong)端为(wei)(wei)主(zhu)，则采用(yong)(yong)“手机屏优先(xian)(xian)”的(de)设计方案，如果是(shi)使用(yong)(yong)PC电脑为(wei)(wei)主(zhu)，则采用(yong)(yong)“宽屏优先(xian)(xian)”的(de)设计方案，不能一味地认(ren)为(wei)(wei)响应式布局就是(shi)专门为(wei)(wei)移动(dong)建站而设计的(de)。

以(yi) “手机(ji)(ji)屏(ping)(ping)优先”为例来说，我们(men)可以(yi)将竖屏(ping)(ping)和(he)横屏(ping)(ping)模式进行(xing)区分(fen)布局(ju)，从(cong)小屏(ping)(ping)幕(mu)依次至大屏(ping)(ping)幕(mu)进行(xing)布局(ju)规划：iphone4、iphone5、 iphone6、iphone6 plus、mini ipad、ipad、PC小屏(ping)(ping)、PC宽屏(ping)(ping)。当(dang)然也(ye)可以(yi)根据(ju)需求情况，调整或(huo)合并一(yi)些屏(ping)(ping)幕(mu)的布局(ju)方式，至于三星、小米等手机(ji)(ji)或(huo)Pad屏(ping)(ping)幕(mu)，实(shi)际上与苹(ping)果(guo)系列(lie) 的屏(ping)(ping)幕(mu)规格(ge)基本一(yi)致(zhi)，布局(ju)也(ye)不会出现偏差，所以(yi)我们(men)建议(yi)大家(jia)不妨(fang)就做个果(guo)粉吧。

免费的响应式布局在线测试工具
//www.1000zhu.com/tool/responsive/

响应式布局的发展前景

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

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

我(wo)们在《前瞻2015全球网站(zhan)设计趋势》一(yi)文(wen)中就(jiu)提到(dao)，响(xiang)应(ying)式布局将席卷(juan)各种(zhong)(zhong)互联网，今后它将不(bu)再(zai)是(shi)一(yi)种(zhong)(zhong)网站(zhan)设计趋势，而是(shi)一(yi)种(zhong)(zhong)常态(tai)，这是(shi)大势所趋。