基于HTML5技術的響應式Web設計淺析

中國東方電氣集團有限公司 程榮贇

基于HTML5技術的響應式Web設計淺析

中國東方電氣集團有限公司 程榮贇

隨著互聯網技術的飛速發展，為適應日益增長的多元化終端設備瀏覽需求，使用戶在不同閱讀終端上都能有良好的使用感受，本文淺析了一種高效的解決方案：基于HTML5技術的響應式Web設計。通過對媒體查詢、流體布局、彈性圖片等Web設計技術的組合和提升,實現任意閱讀終端對網頁布局及內容都能良好地呈現，是未來Web設計技術發展的大勢所趨。

響應式；HTML5；Web設計

0 引言

隨著IT信息技術和移動互聯網的飛速發展，移動閱讀終端，如平板電腦、智能手機等越來越普及，且型號各異，而各類桌面計算機、電視屏幕規格也越來越多元化，主流設備的概念越來越被淡化。讓網站頁面盡量兼容各類設備，適應各種分辨率的屏幕，確保良好的用戶體驗，是Web前端開發工程師必須要解決的重要問題。響應式Web設計因此應運而生，一個網站能夠兼容多個終端，而不是為每個終端都做一個特定的版本，就像具備自主辨識能力一樣，確保用戶無論在何種閱讀環境下，都能得到良好的體驗感。

1 響應式Web設計的概念

獨立Web設計師伊森·馬科特（Ethan Marcotte）在2010年首次提出了響應式Web設計（Responsive Web Design）概念。他認為，真正的響應式Web設計方法不僅僅是簡單的根據可視區域大小來改變網頁布局，而是要從整體上顛覆當前的網頁設計方法，是針對任意閱讀終端的網頁內容進行完美布局的一種顯示機制。意即，一個響應式網站=智能手機端網站+平板電腦端網站+桌面電腦端網站+其他顯示終端網站。

圖1 響應式布局示例

2 響應式Web設計的優缺點

2.1 響應式Web設計的優點顯而易見

（1）瀏覽器兼容性良好，用戶體驗友好。傳統Web設計通常只適用于某些特定規格的設備，如果新設備的屏幕分辨率變化較大，則往往無法兼容。而開發新的版本又需要更多的時間成本與人工成本。響應式Web設計則有效地解決了這個問題。響應式網站可以根據不同終端設計、不同屏幕尺寸和不同應用環境，自動調整頁面布局、展示內容、圖文大小，提供最符合人體視覺習慣的視覺展示效果，用戶體驗十分友好。

（2）降低設計開發、運營維護成本。傳統Web設計模式需要對桌面電腦網頁、平板電腦網頁、智能手機網頁分別進行單獨設計與開發，工作量巨大，而響應式Web設計只需設計兩套設計效果圖，桌面電腦端與平板電腦端可以共用一套，智能手機端單獨使用一套；從前端開發角度說，不再需要分別開發三套完全不一樣的頁面代碼，只需要根據臨界點為不同終端開發三套不同的CSS樣式；從后期維護角度來說，操作靈活，響應式Web設計是針對頁面的，可以只對必要的頁面進行改動，其他頁面不受影響，因此不再需要分別維護電腦頁面、平板頁面、手機頁面，只需維護一個頁面即可，極大地節約了人工成本與時間成本。

2.2 與此同時，響應式Web設計也有自己的局限性

（1）對非webkit內核的老版本IE瀏覽器兼容性較差。非webkit內核的老版本IE瀏覽器（如IE6、IE7、IE8）無法訪問響應式網頁，但由于這些老版本IE瀏覽器本身已有很多問題，在現代互聯網環境中已建議停用。

（2）頁面響應速度可能會變慢。由于訪問響應式頁面時會同時下載多套CSS樣式代碼，如，用手機訪問時，可能同時下載桌面電腦、平板電腦的樣式代碼，導致網頁文件變大，影響加載速度。不過CSS樣式代碼占用內存相對圖片來說不算大，如果前端程序開發優化得當，基本不會影響網站加載速度。

在當今互聯網時代的基礎設施和技術條件下，響應式Web設計的優點非常突出，缺點已經顯得瑕不掩瑜，響應式設計必定是未來發展趨勢。

3 基于HTML5技術的響應式Web設計實現

3.1 HTML5技術的優勢

HTML5由萬維網聯盟（W3C）于2014年10月發布，是指包括HTML、CSS和JavaScript在內的一套技術組合，目前大部分瀏覽器已經支持HTML5技術。HTML5強化了Web網頁的表現性能，且追加了本地數據庫等Web應用功能。

相較傳統的Web網頁開發技術，HTML5擁有著無可比擬的優勢。HTML5技術的成熟與革新對響應式Web設計的發展起到了至關重要的作用。在創建頁面時，HTML5強調簡化標簽，僅鏈接頁面必需的CSS、JavaScript和圖片文件。HTML5也可以在表單提交等基本網頁交互場景中對用戶做出反饋，通過創建更為簡潔、高效的代碼，很大程度上減少代碼冗余，提高設備運行效率。較之HTML4.0.1，HTML5做出了極大的改進，提供了更多、更加語義化的新特性。CSS3的媒體查詢更是響應式設計不可或缺的組成部分。HTML5具有較好的可移植性，適用于多個操作系統和主流瀏覽器，節省開發團隊的時間成本與人工成本。

3.2 響應式Web設計基本規則

響應式頁面設計的基本規則：

（1）內容區塊可伸縮：內容區塊的在一定程度上能夠自動調整，以確保填滿整個頁面；

（2）內容區塊可調整位置：當頁面尺寸變動較大時，能夠減少或增加布局的列數；

（3）邊距能適應頁面尺寸：到頁面尺寸發生更大變化時，區塊的邊距也應該變化；

（4）圖片能適應比例變化：對于常見的寬度調整，圖片在隱去兩側部分時，依舊保持美觀可用；

（5）內容能自動隱藏或部分顯示：如在電腦上顯示的大段描述文本，在手機上就只少量顯示或全部隱藏；

（6）導航和菜單能自動折疊：展開還是收起，應該根據頁面尺寸來判斷。

3.3 響應式Web設計實現方法

（1）媒體查詢與流體布局

CSS3中的媒體查詢（Media Query）是實現響應式頁面設計的關鍵之一，它根據分辨率寬度的變化來調整頁面布局結構。但僅使用媒體查詢來調整頁面范圍的話，中間沒有經過平滑過渡，變化較突兀。媒體查詢與流體布局相結合是一種很好的解決方式。

以父級容器寬度為固定960px的頁面示例。頁面的主要布局結構用更加語義化的HTML5標簽來實現，包括頁頭、主要內容部分、側邊欄和頁腳。

對桌面電腦而言，960px適用于任何寬于1024像素的分辨率。通過媒體查詢來監測寬度小于960px的屏幕分辨率，并設置流體布局寬度，意即布局元素的寬度可隨瀏覽器窗口的尺寸變化進行調整。當可視部分的寬度進一步減小到650px以下時，主要內容部分的容器寬度會增大至全屏，而側邊欄將被置于主內容部分的下方，整個頁面變為單欄布局。

當瀏覽器可視區域寬度大于650px小于960px時，媒體查詢與流體布局相結合：將pagewrap的寬度設置為95%；將content的寬度設置為60%；將sidebar的寬度設置為30%。當瀏覽器可視部分寬度小于650px時，布局采用單欄方式：將header的高度設置為auto；將main-nav、site-logo、site-description的定位設置為static；將content和sidebar的寬度設置為auto，并取消float設置。當瀏覽器可視部分寬度小于480px時，禁用html節點的字號自動調整。

需注意的是，對于那些尚不支持媒體查詢的瀏覽器，需在頁面中調用css3-mediaqueries.js。

（2）彈性圖片與文字

使用CSS3中的max-width和height:auto來實現圖片彈性化。如設置img{max-width:50%;height:auto;}，可以使圖片自動縮放到與其容器按50%的比例匹配。圖片本身的尺寸需比其顯示尺寸大，以保證渲染效果。最好給彈性圖片加一個閾值，如一張圖片的實際寬度為100px，則可以設置img{width:50%;max-width:100px;}，這樣就可以保證圖片的自由縮放，而且也不會超出正常顯示的范圍。

為實現文字的自適應縮放，使用em替換px。em值是相對其父級元素的字體大小而言的。公式為“目標元素尺寸÷父級元素尺寸=百分比尺寸”，可將文字的絕對值尺寸轉換為相對值尺寸。

4 結語

隨著互聯網技術的飛速發展，閱讀終端設備越來越多元化，相應的屏幕尺寸千差萬別。如何能夠使用戶在不同閱讀終端上都能有良好的視覺體驗，是前端開發工程師不得不面對的重要課題。響應式Web設計方式提供了一種有效的解決方案，通過對Web設計技術的組合和提升,實現了任意閱讀終端對網頁布局及內容都能良好地呈現，是未來Web設計技術發展的必然趨勢。

[1]Ethan Marcotte．Responsive Web Design[EB/OL]．http：//www．alisapart．com/articles/responsive-web-design/,2010-05-25．

[2]Mickley Gillenwater． Flexible Web Design： Creating Liquid and Elastic Layouts with CSS[M]．USA：New Riders,2009：285-312．

[3]Frain B．Responsive Web Design with HTML5 and CSS3[M]．Birmingham：Packt Publishing,2012：10-11．

[4]張樹明．基于響應式Web設計的網頁模板的設計與實現[J]．計算機與現代化,2013,1(6)：125-127．

[5]熊瑞英,王寧．響應式Web設計[J]．科技創新導報,2015,12(26)：64-65．

程榮贇（1984—），四川德陽人，碩士研究生，現就職于中國東方電氣集團有限公司。