響應(yīng)式Web開發(fā)模式分析

蘇奎+董默+張彥超

摘要：隨著移動互聯(lián)網(wǎng)和移動通信設(shè)備的發(fā)展，響應(yīng)式Web設(shè)計這種很早就出現(xiàn)但不被人注意的設(shè)計理念逐漸在這2年中發(fā)展起來?？梢灶A(yù)見在今后的Web前端開發(fā)中響應(yīng)式開發(fā)技術(shù)將成為必然的趨勢。本文對此技術(shù)做一簡單綜述，介紹了響應(yīng)式開發(fā)的開發(fā)流程和設(shè)計方式，并對某些具體實現(xiàn)給以簡單闡述。

關(guān)鍵詞：響應(yīng)式Web；CSS；流式布局

中圖分類號：TP393.0

文獻標(biāo)識碼：A

DOI：10.3969/j.issn.1003-6970.2015.06.017

本文著錄格式：蘇奎，董默，張彥超，響應(yīng)式Web開發(fā)模式分析U].軟件，2015，36（6）：92-96

AReviewofResponsiveWebDevelopmentPatternsSUKui，DONGMo，ZHANGYan-chao

[Abstract]：WiththedevelopmentofmobileInternetandmobilecommunicationdevices，responsiveWebdesignthathasbeenpresentedbutunnoticedbywebdesignergraduallydevelopedinthesetwoyears.Itcanbepredictedthatre-sponsivewebdesignwillbecometheinevitabletrendinfuture.Thispapermakesasimpleoverviewonthistechnology，introducesthedevelopmentflowanddesignmethodofresponsiveweb，andstatessomeconcreterealization

[Keywords]：Responsiveweb；CSS；Fluidlayout

0引言

在科技飛速更新大趨勢下，人們常用的計算機互聯(lián)網(wǎng)設(shè)備已不僅限于一臺臺式電腦，顯示器和一根網(wǎng)線。各種尺寸，類型的筆記本電腦，平板設(shè)備，智能手機，智能手表，智能電視等帶CPU和存儲功能的各類微型計算機設(shè)備正在迅速崛起。隨著3G，4G網(wǎng)絡(luò)的不斷普及，目前國內(nèi)PC端網(wǎng)站的日均覆蓋人數(shù)基本保持在2.3億人次上下，已趨于停滯。而移動端App的日均覆蓋人數(shù)已接近2億，并呈現(xiàn)持續(xù)上漲趨勢，大量數(shù)據(jù)調(diào)查表明，移動互聯(lián)網(wǎng)行業(yè)時代已經(jīng)到來，越來越多的人開始習(xí)慣用移動設(shè)備代替筆記本和臺式機完成日常工作和生活需要[1]，用戶的注意力從PC向移動端轉(zhuǎn)移的態(tài)勢已不可逆轉(zhuǎn)，人們在這些各種尺寸的智能設(shè)備上瀏覽網(wǎng)頁的用戶體驗需求便必然提高。

傳統(tǒng)的Web前端開發(fā)都是為一種設(shè)備提供的，比如臺式電腦。在設(shè)計時每個Web頁面通常都是為每個元素的寬度固定尺寸。這樣設(shè)計的網(wǎng)頁在不同大小的屏幕上，會有不同的顯示效果，當(dāng)一個用戶使用桌面PC和使用移動互聯(lián)設(shè)備訪問一個網(wǎng)站時，有很大的差異，會感覺不適應(yīng)[2]。為了解決這些問題，為不同的設(shè)備制作不同的網(wǎng)頁是目前國內(nèi)很多網(wǎng)站的做法，例如可以專門為移動設(shè)備提供一個mobile版本，以保證網(wǎng)頁在不同設(shè)備上的顯示效果，但是維護成本卻增加了，同時也大大增加了架構(gòu)設(shè)計的復(fù)雜度[3]。隨著目前不同尺寸設(shè)備的增多，我們不可能為每種設(shè)備都去單獨開發(fā)一套Web界面。

1響應(yīng)式頁面為了應(yīng)對引言中有關(guān)問題，2010年，EthanMarcotte提m了“響應(yīng)式Web設(shè)計（ResponsiveWebDesign）”的概念[4]。該文借鑒了響應(yīng)式建筑設(shè)計的思路：現(xiàn)出現(xiàn)了一門新興的學(xué)科一一”響應(yīng)式架構(gòu)（responsivear-chitecture）”，物理空間應(yīng)該可以根據(jù)存在于其中的人的情況進行響應(yīng)。同樣，頁面的設(shè)計與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺、屏幕尺寸、屏幕定向等）進行相應(yīng)的響應(yīng)和調(diào)整。盡管響應(yīng)式Web在2010年被提出，這個技術(shù)真正開始被國內(nèi)開發(fā)者關(guān)注則是近2年隨著HTML5和CSS3的出現(xiàn)剛剛開始。

2響應(yīng)式Web開發(fā)流程

目前最為常用的Web開發(fā)模型都是基于瀑布模式或瀑布模式的修改。這類模式通?？梢院喕癁?個步驟：計劃分析、總體架構(gòu)設(shè)計、具體開發(fā)、精確測試、完善修改。

2.1計劃分析與總體設(shè)計

傳統(tǒng)的開發(fā)過程里的框架圖主要由布局和組件構(gòu)成。它們通常被設(shè)定為一個特定的尺寸（通常基于像素，比如wrapper通常是960px的顯示器寬度），并且?guī)缀鯖]有調(diào)整的余地。這些框架給出了具體的網(wǎng)格布局的尺寸大小，在某個特定屏幕分辨率下，它們通常能夠獲取最佳的瀏覽效果，但在更大或更小的分辨率下，網(wǎng)站可能產(chǎn)生橫向滾動條，或在頁面兩側(cè)產(chǎn)生空白區(qū)域[5]。不一樣的屏幕會導(dǎo)致布局的改變，最后可能導(dǎo)致導(dǎo)航條菜單無法使用，無法進入表單，界面也會變得凌亂。在響應(yīng)式Web開發(fā)中視圖不同設(shè)計的組件也不相同，頁面并不是起到包含的作用。框架圖要考慮到在各種尺寸的屏幕上顯示，因此布局尺寸也是多樣的。布局要能夠適應(yīng)各種分辨率尺寸，考慮三列，兩列，甚至在小的顯示設(shè)備上采用單列顯示。響應(yīng)式的Web設(shè)計不應(yīng)使用基于像素的完美設(shè)計，而應(yīng)設(shè)計不同尺寸的布局和組件以便適應(yīng)多樣化的要求。滾動條，文字內(nèi)容，表單和其他成份是組成整個頁面的基礎(chǔ)。在計劃分析時也應(yīng)考慮到除了鼠標(biāo)鍵盤以外的設(shè)備進行控制，比如平板電腦或手機上的觸控。

2.2具體開發(fā)與測試

在響應(yīng)式的開發(fā)模式下，開發(fā)是以靈活的網(wǎng)格為基礎(chǔ)的。各種組件可以容易的被加入到布局中，因此最初設(shè)計上并未規(guī)劃各種組件。但在開發(fā)過程中開發(fā)者要對組件進行設(shè)計并在各個階段實施測試，對各個組件代碼進行優(yōu)化亦是必不可少的。通過策劃者，設(shè)計師和開發(fā)者之間良好的協(xié)作可以規(guī)避由于必需的修改而引起的各種問題。在開發(fā)的每一個階段都應(yīng)在多種瀏覽器和不同尺寸屏幕中進行測試，這樣可盡早發(fā)現(xiàn)問題，也可發(fā)現(xiàn)某種移動環(huán)境與框架圖不匹配的錯誤，以及了解該設(shè)計在不同平臺上的性能。測試內(nèi)容包括可訪問性、導(dǎo)航與表單的可用性、可讀性等方面。對于較小屏幕設(shè)備，將全局導(dǎo)航與主要內(nèi)容之間的部分高度壓縮，或者采用可折疊設(shè)計，確保頁面跳轉(zhuǎn)后主要內(nèi)容可以呈現(xiàn)在首屏中，以防引起用戶誤認(rèn)為頁面沒有完成跳轉(zhuǎn)。

2.3完善修改

傳統(tǒng)開發(fā)過程沒有通過設(shè)計和界面迭代的過程，容易忽略項目中的小細(xì)節(jié)，從而引起一些問題并與客戶期望相沖突。在響應(yīng)式開發(fā)中，可以在取得進展的同時，采用動態(tài)代碼向客戶展示每一步的實現(xiàn)過程。這樣這些早期的成果可以推動下一階段工作的進行，并在截至日期之前容易進行關(guān)鍵的修改。

3響應(yīng)式Web的實現(xiàn)方式

3.1媒體查詢（MediaQueries）

W3C在CSS3中加入了媒體查詢（MediaQueries）模塊，媒體查詢根據(jù)媒體類型、屏幕寬度、屏幕比例、設(shè)備方向（橫向或縱向）等各種功能特性來改變頁面布局，Web設(shè)計者只需要針對不同的屏幕分辨率等級來編寫不同的頁面布局樣式，然后上網(wǎng)設(shè)備會根據(jù)自身的屏幕分辨率來選擇一種適合頁面的布局，從而改善用戶瀏覽體驗[6]。

上圖為媒體查詢方式的簡單調(diào)用的截圖片段，其中代碼來自于Bootstrap，一個目前比較好用的前端框架。當(dāng)屏幕顯示的瀏覽器可視范圍大于1200像素時，容器的展示效果為1170像素，當(dāng)可視范圍在992-1200像素之間時，容器展示效果為970像素。在這里Responsive設(shè)計最關(guān)注的就是寬度，根據(jù)用戶的使用設(shè)備的當(dāng)前寬度，Web頁面將加載一個備用的樣式，實現(xiàn)特定的頁面風(fēng)格。利用CSS3中媒體查詢的技術(shù)支持我們可以定義需要調(diào)整的容器寬度的斷點或稱臨界點，常見的設(shè)備臨界點如圖2所示。

斷點也可以讓頁面布局在預(yù)設(shè)的點進行變形，也就是說，在臺式桌面上顯示3欄，在移動設(shè)備上僅顯示1欄。大多數(shù)CSS屬性都可以實現(xiàn)斷點之間的變形。斷點放置的位置通常取決于內(nèi)容。比如，如果一句話要換行，可能就需要加上斷點。但斷點使用時需要謹(jǐn)慎，如果搞不清內(nèi)容之間的邏輯關(guān)系，很容易弄的混亂。

當(dāng)我們調(diào)整我們?yōu)g覽器的大小時，利用MediaQueries已經(jīng)可以非常不錯地完成工作了，但這并不能滿足移動端的瀏覽器。原因是移動端瀏覽器會默認(rèn)頁面是為寬屏幕設(shè)計的，所以將它縮小整個頁面來適應(yīng)小屏幕。我們需要利用viewportmeta標(biāo)簽，將網(wǎng)頁寬度默認(rèn)等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=l）為l，即網(wǎng)頁初始大小占屏幕面積的100%。

3.2流式布局

利用媒體查詢技術(shù)我們可以根據(jù)屏幕寬度，設(shè)備方向等各種功能特性來改變頁面布局，但是這種改變有著很大的局限性：這種變化方式是突變的，從一組CSS媒體查詢規(guī)則突變到另一組，兩者之間沒有任何平滑漸變。如果窗口處于媒體查詢所設(shè)的固定寬度范圍外時瀏覽網(wǎng)頁就需要水平滾動才能完整瀏覽。出現(xiàn)這種問題的原因是網(wǎng)頁中的內(nèi)容的是使用絕對單位，比如像素來定義的[7]。要解決上述問題，就需要另外一種設(shè)計理念：動態(tài)布局（或稱流式布局）。動態(tài)布局的設(shè)計思路是一切設(shè)計都盡量以動態(tài)的方式來進行操作和布局，而不是以固定不變的形式。流式布局可以概括為以下幾種技術(shù)：

3.2.1百分比寬度（FluidWidth）

傳統(tǒng)頁面中的table或者div通常都是固定像素寬度的，當(dāng)頁面放大縮小時寬度依然會是原有設(shè)定的寬度。利用百分比可以根據(jù)瀏覽器窗口寬度自動調(diào)整頁面布局，不會出現(xiàn)水平滾動條，大屏幕時，頁面兩側(cè)不會出現(xiàn)固定布局中的大面積空白，小屏幕時，內(nèi)容也不會擠成一團難以閱讀[8]。在丹·錫德霍姆（DanCederholm）編寫的《無懈可擊的Web設(shè)計》一書中，伊桑·馬科特為其撰寫了一章關(guān)于流動布局的內(nèi)容。在書中，他提出了一個標(biāo)準(zhǔn)化的公式，即“目標(biāo)元素寬度÷上下文元素寬度=百分比寬度”[9]。

圖3中左側(cè)所示為演示頁面的html導(dǎo)航條演示代碼，中間所示的是對應(yīng)CSS中的Wrapper和navigation代碼，右側(cè)所示為CSS固定寬度轉(zhuǎn)換為百分比寬度代碼。該代碼在轉(zhuǎn)換后會發(fā)生問題，導(dǎo)航條內(nèi)容會相互擠在一起。原因是左邊的導(dǎo)航中Li標(biāo)簽的CSS中并未設(shè)置寬度，而鏈接被包裹在各自對應(yīng)的

4結(jié)語

本文概述了響應(yīng)式Web設(shè)計中的開發(fā)方法和具體實現(xiàn)方式，闡述了在響應(yīng)式Web開發(fā)中值得注意的問題。盡管響應(yīng)式Web設(shè)計目前仍有爭議和弊端，包括太多的資源請求和有限的終端支持之間的矛盾，或是響應(yīng)式的網(wǎng)頁設(shè)計和移動終端在用戶體驗和視覺風(fēng)格上的差異[13]。但是，響應(yīng)式Web設(shè)計仍然能夠給網(wǎng)站開發(fā)和維護帶來巨大的好處，一個合理的響應(yīng)式Web設(shè)計可以適應(yīng)幾乎所有設(shè)備的屏幕，因此它能夠?qū)τ脩籼峁└鼮橛押玫慕缑鎇14]。同時互聯(lián)網(wǎng)[15-17]網(wǎng)站的維護和開發(fā)工作量也更低，因為開發(fā)和維護一個單獨的網(wǎng)站比開發(fā)和維護并且同步多個為每個設(shè)備同時開發(fā)的網(wǎng)站成本會小很多。

參考文獻

[1]張幸芝，徐東東，賈菲.基于響應(yīng)式Web設(shè)計的教務(wù)系統(tǒng)移動平臺研究與建設(shè)[J].軟件，2013，34（6）：5-7.

[2]貝巖.響應(yīng)式Web設(shè)計實現(xiàn)方法研究[J].渤海大學(xué)學(xué)報（自然科學(xué)版），2014，02：170-172.

[3]密海英.面向不同設(shè)備的響應(yīng)式網(wǎng)頁設(shè)計探析[J].蘇州市職業(yè)大學(xué)學(xué)報，2013，02：34-37.

[4]EthanMarcotte.Responsivewebdesign[EB/OL].（2010-05-25）[2012-12-01].Http：//www.alistapart.com/articles/responsive-web-design/.

[5]劉歡，盧蓓蓉.使用響應(yīng)式設(shè)計構(gòu)建高校新型門戶網(wǎng)站[J].中國教育信息化，2013，09：71-77.

[6]趙建保.響應(yīng)式Web設(shè)計關(guān)鍵技術(shù)及設(shè)計流程[J].電腦知識與技術(shù)，2014，05：1066-1068.

[7]許中博.“響應(yīng)式”網(wǎng)頁布局設(shè)計淺析[J].黑龍江科技信息，2012，26：106.

[8]王愉，潘明明.響應(yīng)式網(wǎng)頁設(shè)計初探[J].北京印刷學(xué)院學(xué)報，2014，03：13-15.

[9]張聰聰.淺析響應(yīng)式網(wǎng)頁設(shè)計的實現(xiàn)與優(yōu)化[J].戲劇之家，2015，05：166.

[10]CSS2.0中文手冊[EBIOL].http：//www.w3school.com.cn/cssref/.

[11]BenFrain.ResponsiveWebDesignwithHTML5andCSS3[M].PacktPublishing，2012，4.

[12]張樹明.基于響應(yīng)式Web設(shè)計的網(wǎng)頁模板的設(shè)計與實現(xiàn)[J].計算機與現(xiàn)代化，2013，06：125-127.

[13]羅強，劉玉梅.淺談響應(yīng)式Web設(shè)計[J].科技風(fēng)，2013，21：93.

[14]崔松健.響應(yīng)式Web設(shè)計[J].信息與電腦（理論版），2013，10：25-26.

[15]李少輝.面向?qū)ο笈cMVC框架的融合[J].軟件，2013，34（1）：82-84.

[16]李建新.網(wǎng)絡(luò)條件下的辦公室自動化建設(shè)[J].軟件，2013，34（1）：98-99.

[17]張健.移動互聯(lián)網(wǎng)時代的移動商務(wù)[J].新型工業(yè)化，2011，1（6）：41-48.