蘇奎+董默+張彥超

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

關鍵詞：響應式Web；CSS；流式布局

中圖分類號：TP393.0

文獻標識碼：A

DOI：10.3969/j.issn.1003-6970.2015.06.017

本文著錄格式：蘇奎，董默，張彥超，響應式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引言

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

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

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

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

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

2.1計劃分析與總體設計

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

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

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

2.3完善修改

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

3響應式Web的實現方式

3.1媒體查詢（MediaQueries）

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

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

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

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

3.2流式布局

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

3.2.1百分比寬度（FluidWidth）

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

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

4結語

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

參考文獻

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

[2]貝巖.響應式Web設計實現方法研究[J].渤海大學學報（自然科學版），2014，02：170-172.

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

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

[5]劉歡，盧蓓蓉.使用響應式設計構建高校新型門戶網站[J].中國教育信息化，2013，09：71-77.

[6]趙建保.響應式Web設計關鍵技術及設計流程[J].電腦知識與技術，2014，05：1066-1068.

[7]許中博.“響應式”網頁布局設計淺析[J].黑龍江科技信息，2012，26：106.

[8]王愉，潘明明.響應式網頁設計初探[J].北京印刷學院學報，2014，03：13-15.

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

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

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

[12]張樹明.基于響應式Web設計的網頁模板的設計與實現[J].計算機與現代化，2013，06：125-127.

[13]羅強，劉玉梅.淺談響應式Web設計[J].科技風，2013，21：93.

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

[15]李少輝.面向對象與MVC框架的融合[J].軟件，2013，34（1）：82-84.

[16]李建新.網絡條件下的辦公室自動化建設[J].軟件，2013，34（1）：98-99.

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