什么是響應(yīng)式布局?
響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個概念,簡單來說,就是讓網(wǎng)站能夠兼容多個終端設(shè)備,例如PC電腦、Pad平板、各種手機(jī),或是未來的谷歌glass、蘋果iWatch等,不論橫屏或豎屏狀態(tài),網(wǎng)站都可以完美顯示,而不是每個終端都單獨(dú)制作一個版本。
響應(yīng)式布局概念提出之后,很快便在全球范圍內(nèi)形成了一種網(wǎng)站設(shè)計趨勢,千助也對其設(shè)計理念和制作技術(shù)進(jìn)行了深入的研究和實(shí)踐,并將其應(yīng)用于自身的官方網(wǎng)站建設(shè)當(dāng)中 ( 1000zhu.com ) ,下面就與大家分享下響應(yīng)式布局的設(shè)計思路。
響應(yīng)式布局的設(shè)計思路
在以前的網(wǎng)站制作過程中,調(diào)試各種瀏覽器兼容性已經(jīng)給設(shè)計者們帶來了很大的困擾,現(xiàn)在又要加上各種屏幕的兼容測試,這不是讓人崩潰的節(jié)奏嗎?但是,有需求就會有解決方案,CSS3媒體查詢 ( Media Query ) 技術(shù)的誕生解決了這個難題,我們通過這種技術(shù)可以輕松地判斷設(shè)備屏幕尺寸,并根據(jù)不同的尺寸調(diào)整布局方式,從而實(shí)現(xiàn)了兼容多種終端設(shè)備的需求。
在進(jìn)行響應(yīng)式布局設(shè)計時,我們首先要明確網(wǎng)站用戶的主要終端來源,如果是移動端為主,則采用“手機(jī)屏優(yōu)先”的設(shè)計方案,如果是使用PC電腦為主,則采用“寬屏優(yōu)先”的設(shè)計方案,不能一味地認(rèn)為響應(yīng)式布局就是專門為移動建站而設(shè)計的。
以“手機(jī)屏優(yōu)先”為例來說,我們可以將豎屏和橫屏模式進(jìn)行區(qū)分布局,從最小屏幕依次至最大屏幕進(jìn)行布局規(guī)劃:iphone4、iphone5、iphone6、iphone6 plus、mini ipad、ipad、PC小屏、PC寬屏。當(dāng)然也可以根據(jù)需求情況,調(diào)整或合并一些屏幕的布局方式,至于三星、小米等手機(jī)或Pad屏幕,實(shí)際上與蘋果系列的屏幕規(guī)格基本一致,布局也不會出現(xiàn)偏差,所以我們建議大家不妨就做個果粉吧。
免費(fèi)的響應(yīng)式布局在線測試工具
http://www.szywk.cn/tool/responsive/
響應(yīng)式布局的發(fā)展前景
在目前的市場上,IE9以下版本的瀏覽器不支持響應(yīng)式布局,而Chrome ( 谷歌 )、Firefox ( 火狐 )、Safari ( 蘋果 )、包括國內(nèi)的搜狗、360等瀏覽器已全面支持了響應(yīng)式布局。
雖然在中國依然有大量的IE8用戶存在,但我們看到,全球化的技術(shù)進(jìn)程將很快淘汰低版本瀏覽器。在未來,這些用戶將不得不升級自己的瀏覽器版本,以獲得更好的體驗(yàn)。就連一直以來都我行我素的IT大鱷微軟,也只能跟隨這種趨勢,在其IE的升級版本中加入對響應(yīng)式布局的支持。
我們在《前瞻2015全球網(wǎng)站設(shè)計趨勢》一文中就提到,響應(yīng)式布局將席卷各種互聯(lián)網(wǎng),今后它將不再是一種網(wǎng)站設(shè)計趨勢,而是一種常態(tài),這是大勢所趨。
建站咨詢熱線
4006123011