什么是響應(yīng)式布局？

響 應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個(gè)概念，簡(jiǎn)單來(lái)說(shuō)，就是讓網(wǎng)站能夠兼容多個(gè)終端設(shè)備，例如PC電腦、Pad平板、各種手機(jī)，或是未來(lái)的谷歌 glass、蘋(píng)果iWatch等，不論橫屏或豎屏狀態(tài)，網(wǎng)站都可以完美顯示，而不是每個(gè)終端都單獨(dú)制作一個(gè)版本。

響應(yīng)式布局概念提出之后，很快便在全球范圍內(nèi)形成了一種網(wǎng)站設(shè)計(jì)趨勢(shì)，千助也對(duì)其設(shè)計(jì)理念和制作技術(shù)進(jìn)行了深入的研究和實(shí)踐，并將其應(yīng)用于自身的官方網(wǎng)站建設(shè)當(dāng)中 ( 1000zhu.com ) ，下面就與大家分享下響應(yīng)式布局的設(shè)計(jì)思路。

響應(yīng)式布局的設(shè)計(jì)思路

河南云狐經(jīng)驗(yàn)之談在 以前的網(wǎng)站制作過(guò)程中，調(diào)試各種瀏覽器兼容性已經(jīng)給設(shè)計(jì)者們帶來(lái)了很大的困擾，現(xiàn)在又要加上各種屏幕的兼容測(cè)試，這不是讓人崩潰的節(jié)奏嗎？但是，有需求就 會(huì)有解決方案，CSS3媒體查詢 ( Media Query ) 技術(shù)的誕生解決了這個(gè)難題，我們通過(guò)這種技術(shù)可以輕松地判斷設(shè)備屏幕尺寸，并根據(jù)不同的尺寸調(diào)整布局方式，從而實(shí)現(xiàn)了兼容多種終端設(shè)備的需求。

在進(jìn)行響應(yīng)式布局設(shè)計(jì)時(shí)，我們首先要明確網(wǎng)站用戶的主要終端來(lái)源，如果是移動(dòng)端為主，則采用“手機(jī)屏優(yōu)先”的設(shè)計(jì)方案，如果是使用PC電腦為主，則采用“寬屏優(yōu)先”的設(shè)計(jì)方案，不能一味地認(rèn)為響應(yīng)式布局就是專(zhuān)門(mén)為移動(dòng)建站而設(shè)計(jì)的。

以 “手機(jī)屏優(yōu)先”為例來(lái)說(shuō)，我們可以將豎屏和橫屏模式進(jìn)行區(qū)分布局，從最小屏幕依次至最大屏幕進(jìn)行布局規(guī)劃：iphone4、iphone5、 iphone6、iphone6 plus、mini ipad、ipad、PC小屏、PC寬屏。當(dāng)然也可以根據(jù)需求情況，調(diào)整或合并一些屏幕的布局方式，至于三星、小米等手機(jī)或Pad屏幕，實(shí)際上與蘋(píng)果系列 的屏幕規(guī)格基本一致，布局也不會(huì)出現(xiàn)偏差，所以我們建議大家不妨就做個(gè)果粉吧。

免費(fèi)的響應(yīng)式布局在線測(cè)試工具h(yuǎn)ttp://xintu.1000zhu.com/tool/responsive/

響應(yīng)式布局的發(fā)展前景

在目前的市場(chǎng)上，IE9以下版本的瀏覽器不支持響應(yīng)式布局，而Chrome ( 谷歌 )、Firefox ( 火狐 )、Safari ( 蘋(píng)果 )、包括國(guó)內(nèi)的搜狗、360等瀏覽器已全面支持了響應(yīng)式布局。

雖然在中國(guó)依然有大量的IE8用戶存在，但我們看到，全球化的技術(shù)進(jìn)程將很快淘汰低版本瀏覽器。在未來(lái)，這些用戶將不得不升級(jí)自己的瀏覽器版本，以獲得更好的體驗(yàn)。就連一直以來(lái)都我行我素的IT大鱷微軟，也只能跟隨這種趨勢(shì)，在其IE的升級(jí)版本中加入對(duì)響應(yīng)式布局的支持。

我們?cè)凇肚罢?015全球網(wǎng)站設(shè)計(jì)趨勢(shì)》一文中就提到，響應(yīng)式布局將席卷各種互聯(lián)網(wǎng)，今后它將不再是一種網(wǎng)站設(shè)計(jì)趨勢(shì)，而是一種常態(tài)，這是大勢(shì)所趨。