響應式Web設計關鍵技術及設計流程

趙建保

摘要：適應移動互聯(lián)網(wǎng)Web設計需求，從Web設計實踐出發(fā)，解析了響應式Web設計的媒體查詢、流動布局和彈性視覺媒體三大關鍵技術，提出了響應式Web設計流程，為實現(xiàn)“一源多屏”Web設計提供了解決方案，為移動互聯(lián)網(wǎng)設計和重構提供了技術框架和路徑。

關鍵詞：響應式；CSS3；Web設計

中圖分類號：TP3 文獻標識碼：A 文章編號：1009-3044（2014）05-1066-03

Responsive Web Design Key Technology and Design Process

ZHAO Jian-bao

（Department of Computer Science，Guangdong AIB Polytechnic College，Guangzhou 510507，China）

Abstract： Web design needs to adapt to the mobile Internet， from Web design practice， parsing the responsive Web design media queries， fluid layouts and visual media elasticity three key technologies ，proposed responsive web design process to achieve "a source multi-screen" web design solutions ， provided the technical framework and path for the mobile Internet design and Reconstruction.

Key words： Responsive web design； CSS3； Web design

根據(jù)CNNIC第32次互聯(lián)網(wǎng)絡發(fā)展狀況調查結果，截至2013年6月，中國手機網(wǎng)民的總規(guī)模達4.64億。其中，手機瀏覽器用戶規(guī)模為3. 69億，同比增長21. 0%，在手機網(wǎng)民中的滲透率為79. 5%[1]，手機網(wǎng)民正在以前所未有的速度增長。與此同時，上網(wǎng)設備已經(jīng)不僅僅是手機、平板電腦、PC，小到眼鏡、手表，大到電視、冰箱都可以上網(wǎng)，上網(wǎng)設備顯示屏物理尺寸不同，輸入模式不同，操作系統(tǒng)不同，瀏覽器內核及版本不同，導致不一致的窗口寬度、屏幕分辨率、用戶參數(shù)和用戶字體，上網(wǎng)設備碎片化趨勢明顯[2][3]。目前，Web設計中普遍使用固定寬度（如960像素）為所有終端用戶提供一致的用戶界面，在顯示屏分辨率趨于一致時顯示很好，但在大尺寸高分辨率顯示器上會顯示高達50%空白區(qū)域，而在移動終端上頁面大小不能匹配終端屏幕大小，頁面布局不能自適應調整，無法按100%比例顯示頁面寬度，出現(xiàn)水平滾動條，尋求標準分辨率越來越困難[4][5]。理想情況下，Web設計應該根據(jù)用戶顯示屏分辨率定制多個版本，以提供最佳用戶瀏覽體驗，但會導致網(wǎng)站建設與維護工作量成倍增長，建設周期明顯延長，建設費用成倍增加[6]。在此背景下，Web設計師應順勢而為，勇于面對上網(wǎng)設備的多樣性，放棄在不同平臺的不同瀏覽器上網(wǎng)頁效果完全一致性的追求，設計能自適應用戶終端設備的網(wǎng)站。響應式網(wǎng)頁設計（Response Web Design），整合媒體查詢、彈性視覺媒體和流動布局，有助于解決不同上網(wǎng)設備的適配性問題，使網(wǎng)站兼容多種設備和屏幕，實現(xiàn)“一源多屏”。

1 關鍵技術

響應式設計整合了媒體查詢、彈性視覺媒體和流動布局[7]，媒體查詢實現(xiàn)按設備特性來分級控制頁面布局，彈性視覺媒體實現(xiàn)視覺媒體按照特定布局的動態(tài)調整，使用流動布局能創(chuàng)建可縮放、可流動的彈性版式，三者構成了響應式設計的核心技術。

1.1 媒體查詢

在CSS2.1媒體類型允許為顯示器（screen）、打印機（print）、電視機（tv）等媒體定義樣式，W3C在CSS3中加入了媒體查詢（Media Queries）模塊，不但支持定義媒體類型，而且支持上網(wǎng)設備的物理特性的檢測。沒有CSS3的媒體查詢模塊，就不能針對設備特性匹配特定的CSS樣式。媒體查詢根據(jù)媒體類型、屏幕寬度、屏幕比例、設備方向（橫向或縱向）等各種功能特性來改變頁面布局，而不僅僅像CSS2.1的只是媒體類型。Web設計者只需要針對不同的屏幕分辨率等級來編寫不同的頁面布局樣式，然后上網(wǎng)設備會根據(jù)自身的屏幕分辨率來選擇一種適合頁面的布局，從而改善用戶瀏覽體驗。媒體查詢表達式由設備類型和一個或多個檢測媒體特性的聲明構成，聲明由媒體特性名稱和值構成，中間用冒號“：”分隔[8]。媒體查詢的語法為：“@media 媒體類型 and （媒體特性） {樣式代碼}”，其中媒體類型常用的有all（所有設備）、screen（電腦顯示器）、print（打印機或者打印預覽）和tv（電視機）。CSS3中定義的媒體特性共有13種，分別是視口寬度width、視口高度height、設備屏幕分辨率寬度device-width、設備屏幕分辨率高度device-height、設備方向orientation[portrait | landscape]、視口寬高比aspect-ration、設備屏幕分辨率寬高比device-aspect-ratio、設備支持的每像素色彩位數(shù)color、設備的顏色索引表中的顏色數(shù)color-index、黑白屏幕設備每個像素的所使用的位數(shù)monochrome 、屏幕或打印機分辨率的resolution、電視機掃描方式scan[progressive | interlace]、輸出設備是柵格還是位圖grid[0|1]?？墒褂胊nd關鍵詞組合媒體類型和媒體特性值條件，在媒體類型前面或媒體特性前面加not對后面的表達式取反，加逗號“，”在一系列表達式其中一個真時則為真，加only使不支持媒體查詢的瀏覽器忽略本條查詢，“{ }”中書寫CSS規(guī)則。例如 “@media screen and （min-width： 480px） {}”表示視口寬度小于480px適用，“@media screen and （min -width： 480px） and （max -width： 768px） {}”表示視口寬度大于480px但小于768px適用，“@media screen and （max-width： 960px） {}”表示視口寬度小于960px適用，“@media screen and （min-width： 1420px） {}”表示視口寬度大于1420px適用，這時可能要考慮設置max-width屬性限制內容區(qū)的最大寬度，或者增加列數(shù)來填補大量的空白區(qū)域[9][10]。響應式Web設計最為常見的是檢測上網(wǎng)設備的width特性值，設定視口寬度的級數(shù)取決于用戶群體終端設備碎片化程度和視覺設計需求，需為不同終端級別寬度定制相匹配的樣式，做到寬度連續(xù)覆蓋。另一種設計思路強調以界面為主導，解除斷點設置跟上網(wǎng)設備分辨率的直接關聯(lián)，斷點數(shù)量及參數(shù)完全根據(jù)內容來決定，也就是根據(jù)網(wǎng)站的圖文版式的變動臨界點來設置。

響應式Web布局設計時，媒體查詢順序采用從移動端向上設計，優(yōu)先建立移動設備用戶體驗，然后針對更大屏幕的顯示器進行調整，以避免移動終端對媒體查詢的支持不完善，也就是，在樣式表的開頭定義基本樣式，然后使用媒體查詢從低分辨率到高分辨率來重寫樣式以覆蓋前面定義的樣式[11]。

為減少HTTP請求數(shù)量，建議將媒體查詢樣式盡可能寫在同一個文件中。對于較復雜的網(wǎng)站，可以采用外部樣式表，通過標簽鏈接到網(wǎng)頁文件，如“”，實現(xiàn)當視口寬度大于等于960px時載入外部樣式表gt-960px.css。

目前，移動終端瀏覽器一般都能比較好支持CSS3，不需要考慮響應式布局的媒體查詢兼容問題，為實現(xiàn)IE9以下的瀏覽器媒體查詢兼容性，需在頁面中插入css3-mediaqueries.js文件調用，代碼如下：

<！—[if lt IE 9]>

<！[endif]—>

1.2 流動布局

媒體查詢能適應不同設備和視口寬度，可以從一組CSS樣式代碼切換到另一組，但切換期間沒有任何平滑過渡，會導致媒體內容要么過寬出現(xiàn)水平滾動條，要么過窄出現(xiàn)大量空白，尤其在切換臨界點時布局會嚴重惡化。通過將固定像素布局轉換成靈活的流動布局，確保在媒體查詢未切換樣式期間布局能適應視口改變。流動布局依靠浮動和百分比寬度來實現(xiàn)，浮動實現(xiàn)布局區(qū)塊的動態(tài)重組，百分比寬度實現(xiàn)未到達斷點時的區(qū)塊寬度調整，以減少創(chuàng)建的斷點數(shù)。浮動布局在固定寬度的Web設計中已經(jīng)大量使用，在此不在贅述。將固定像素寬度轉換成百分比寬度可套用公式：百分比寬度=目標元素寬度÷上下文元素寬度。例如，將原來#wrapper寬度為960px，#content寬度為940px，轉換為百分比布局#content寬度97.92%，即940÷960=0.9792。

在網(wǎng)頁文檔標簽中插入一個HTM5標簽，設置基于WebKit內核的畫布縮放參數(shù)，如 ，可實現(xiàn)頁面在瀏覽器中以原始大小顯示，禁止用戶縮放。其中：width和height檢測設備屏幕分辨率寬度和高度，initial-scale 設定初始的縮放比例，值為1時將根據(jù)瀏覽器可視區(qū)域實際大小來渲染頁面。minimum-scale和maximum-scale指允許用戶縮放到的最小比例和最大比例，user-scalable設定用戶是否禁止縮放。

1.3 彈性視覺媒體

視覺媒體主要指文本、圖形、圖像、動畫和視頻等可視媒體。彈性視覺媒體設計的本質是確保視覺媒體適應版式布局的變化，確保頁面上媒體的可讀性。響應式Web設計時文本和其他視覺媒體實現(xiàn)方式不同。

彈性文本需將文本大小單位從px改為em， em的大小由上下文的定義的字體大小計算而來，是相對大小單位。使用em的好處在于：允許縮放文本和保持文本大小設計的靈活性。設計時通常給body標簽設置font-size屬性值后，給其他文本都使用相對單位em，使用相對單位的文本就會基于body的大小來計算字體大小。字體百分比尺寸計算跟百分比布局盒子計算方法相同，如上下文字體大小為16像素，當前文字大小為14像素，則字體大小0.875em，即14÷16=0.875。

圖形圖像、動畫和視頻的彈性設置使用“img，object，video，embed {width：100%； max-width：100%；}”，max-width屬性用于設置媒體顯示閾值，確?？s放時不會超出圖片最大尺寸，同時應刪除HTML插入媒體的標記中的width和height屬性定義，如果要定義特定規(guī)格的媒體尺寸，可編寫專用樣式單獨設置寬度，以覆蓋上下文定義，使其僅作用于該媒體即可。另外一種限制內部媒體顯示縮放比例的方法是給外層盒子設置max-width屬性，通過限制外層盒子來間接控制內部媒體縮放尺寸。

在設計制作彈性視覺媒體時，僅考慮媒體放大到的極限情況會因此帶來一個媒體文件整體偏大，使網(wǎng)站變得臃腫，需利用媒體壓縮和優(yōu)化技術來控制文件大小。另一種實現(xiàn)思路是通過JavaScript判斷當前設備的分辨率，并根據(jù)預設的規(guī)則加載不同尺寸的圖片文件。

2 響應式設計流程

2.1 確定需支持上網(wǎng)設備類型

上網(wǎng)設備調查可以幫助Web設計者了解用戶使用的設備類型、屏幕尺寸、瀏覽器類型及版本[12]。上網(wǎng)設備類型主要調查移動終端（手機、平板）和上網(wǎng)本、筆記本電腦和PC，甚至是信息家電。屏幕尺寸調查主要掌握屏幕的尺寸和長寬比例。瀏覽器類型調查主要掌握瀏覽器類型、采用內核引擎及版本。通過調查最終確定出一份上網(wǎng)設備支持列表。響應式Web設計的目的在于針對不同設備的屏幕特性進行功能及內容的界面預設。對于用戶不太明確的項目，可選擇桌面顯示器、iPad和主流智能手機作為主要代表性的設備，而不必顧全所有已知的設備規(guī)格類型。對于結構復雜，內容豐富的門戶類網(wǎng)站，可以采用響應式設計與手機版、iPad版混合設計模式，對內容龐雜的頁面做成手機版和iPad版，一般頁面則統(tǒng)一采用響應式設計。

2.2 制作線框原型

確定出設備支持列表后，需要依據(jù)這些需求由Web設計師去設計線框原型。制作線框原型的作用是組織并呈現(xiàn)信息，要避免在視覺上過度的保真，它并不是細致的視覺設計，不是Web設計稿，跟字體、字號、配色、圖片等無關。針對確定下來的分辨率級別分別制作不同的線框原型，需要考慮清楚不同尺寸下頁面的布局變化過程，內容縮放過程，甚至針對特殊的環(huán)境作特殊化的設計等。線框原型完成后將圖片導入到相應的設備進行測試，可以幫助設計者盡早識別潛在問題，測試內容包括可訪問性、導航與表單的可用性、可讀性等方面。對于較小屏幕設備，將全局導航與主要內容之間的部分高度壓縮，或者采用可折疊設計，確保頁面跳轉后主要內容可以呈現(xiàn)在首屏中，以防引起用戶誤認為頁面沒有發(fā)成跳轉。

2.3前端實現(xiàn)

線框原型經(jīng)過測試后，交給視覺設計師和前端工程師具體實現(xiàn)，主要任務是頁面布局實現(xiàn)、編寫Media Queries、自動縮放圖像、字體大小采用相對單位、調整移動互聯(lián)設備瀏覽縮放默認規(guī)則和調試[13][14]，相比于傳統(tǒng)的Web視覺設計過程，Web設計師必須時刻保持警惕，關注功能性組件的可用性、保證圖文信息在所有設備中都容易辨讀。前端工程師可以使用響應式前端開發(fā)框架，簡化開發(fā)過程，確保開發(fā)網(wǎng)站具有跨瀏覽器、一致性、響應式等特點[15]。測試響應式布局可以安裝iOS模擬器或者Android模擬器，也可以利用用戶拖動瀏覽器時會觸發(fā)判斷條件的特性，把瀏覽器窗口縮小到一定尺寸就可以檢測響應式布局是否生效。

3 結論

響應式Web設計為適應多樣化的上網(wǎng)設備來設計，它通過整合媒體查詢、流動布局和彈性視覺媒體技術，是一種采用靈活的、不針對特定上網(wǎng)設備的方法來進行Web設計，有效地解決了移動互聯(lián)網(wǎng)用戶終端設備碎片化問題，實現(xiàn)了“一源多屏”的現(xiàn)實需求。在響應式Web設計實踐中，先確定Web設計所支持上網(wǎng)設備列表，然后制作線框原型并測試，再由前端工程師使用響應式布局開發(fā)框架完成網(wǎng)站設計與開發(fā)。開展響應式Web設計關鍵技術及設計流程的探究，能為Web設計師和前端工程師開展響應式設計和網(wǎng)站重構提供了技術框架和路徑。

參考文獻：

[1] 中國互聯(lián)網(wǎng)絡信息中心.2013年手機瀏覽器用戶研究報告[R]. （2013-10-16）[2013-12-24].http：//www.cnnic.cn/hlwfzyj/hlwxzbg/ydhlwbg/201310/P020131016356661940876.pdf

[2] 百度.分辨率使用情況[EB/OL]. [2014-2-13]. http：//#baidu.com/data/screen.

[3] 楊玉梅.瀏覽器CSS兼容問題探究[J].計算機與現(xiàn)代化.2013（7）：220-223.

[4] （英）弗雷恩.響應式Web設計：HTML5和CSS3實戰(zhàn)[M].王永強譯.北京：人民郵電出版社，2013.

[5] 楊葉，陳琳，董啟標.響應式Web移動學習資源的技術實現(xiàn)與設計研究[J].現(xiàn)代教育技術.2013，23（6）：107-111.

[6] 佟延秋，彭江.基于Media Queries的精品課程網(wǎng)站重構研究[J].軟件導刊.2013，12（2）：111-114.

[7] 邢希，田興彥，王世運.響應式Web設計方法的研究[J].瓊州學院學報.2013，20（2）：36-38.

[8] Ethan Marcotte .Responsive Web Design[EB/OL].（2010-5-25）[2013-12-18]. http：//alistapart.com/article/responsive-web-design.

[9] （美）卡德萊茨.響應式Web設計實踐[M].侯鴻儒譯.北京：人民郵電出版社，2013：67.

[10] 陸凌牛.HTML 5與CSS 3權威指南（第二版）[M].北京：機械工業(yè)出版社，2013：647.

[11] Rob Flaherty. Designing The Well-Tempered Web[EB/OL].（2012-1-17）[2013-12-24]. http：//uxdesign.smashingmagazine.com/2012/01/17/designing-well-tempered-web/.

[12] 馬璇.智能移動終端自適應界面的一致性研究[D].北京：北京郵電大學，2013.

[13] 張樹明.基于響應式Web設計的網(wǎng)頁模板的設計與實現(xiàn)[J].計算機與現(xiàn)代化.2013（6）：125-127.

[14] 劉歡，盧蓓蓉.使用響應式設計構建高校新型門戶網(wǎng)站[J].中國教育信息化.2013（9）：71-74.

[15] Bootstrp中文網(wǎng).CSS·Bootstrap[EB/OL].[2014-2-8]. http：//v3.bootcss.com/css/#grid.