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

基于HTML5技術(shù)的響應(yīng)式Web設(shè)計淺析

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

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

響應(yīng)式；HTML5；Web設(shè)計

0 引言

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

1 響應(yīng)式Web設(shè)計的概念

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

圖1 響應(yīng)式布局示例

2 響應(yīng)式Web設(shè)計的優(yōu)缺點

2.1 響應(yīng)式Web設(shè)計的優(yōu)點顯而易見

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

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

2.2 與此同時，響應(yīng)式Web設(shè)計也有自己的局限性

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

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

在當(dāng)今互聯(lián)網(wǎng)時代的基礎(chǔ)設(shè)施和技術(shù)條件下，響應(yīng)式Web設(shè)計的優(yōu)點非常突出，缺點已經(jīng)顯得瑕不掩瑜，響應(yīng)式設(shè)計必定是未來發(fā)展趨勢。

3 基于HTML5技術(shù)的響應(yīng)式Web設(shè)計實現(xiàn)

3.1 HTML5技術(shù)的優(yōu)勢

HTML5由萬維網(wǎng)聯(lián)盟（W3C）于2014年10月發(fā)布，是指包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合，目前大部分瀏覽器已經(jīng)支持HTML5技術(shù)。HTML5強化了Web網(wǎng)頁的表現(xiàn)性能，且追加了本地數(shù)據(jù)庫等Web應(yīng)用功能。

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

3.2 響應(yīng)式Web設(shè)計基本規(guī)則

響應(yīng)式頁面設(shè)計的基本規(guī)則：

（1）內(nèi)容區(qū)塊可伸縮：內(nèi)容區(qū)塊的在一定程度上能夠自動調(diào)整，以確保填滿整個頁面；

（2）內(nèi)容區(qū)塊可調(diào)整位置：當(dāng)頁面尺寸變動較大時，能夠減少或增加布局的列數(shù)；

（3）邊距能適應(yīng)頁面尺寸：到頁面尺寸發(fā)生更大變化時，區(qū)塊的邊距也應(yīng)該變化；

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

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

（6）導(dǎo)航和菜單能自動折疊：展開還是收起，應(yīng)該根據(jù)頁面尺寸來判斷。

3.3 響應(yīng)式Web設(shè)計實現(xiàn)方法

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

CSS3中的媒體查詢（Media Query）是實現(xiàn)響應(yīng)式頁面設(shè)計的關(guān)鍵之一，它根據(jù)分辨率寬度的變化來調(diào)整頁面布局結(jié)構(gòu)。但僅使用媒體查詢來調(diào)整頁面范圍的話，中間沒有經(jīng)過平滑過渡，變化較突兀。媒體查詢與流體布局相結(jié)合是一種很好的解決方式。

以父級容器寬度為固定960px的頁面示例。頁面的主要布局結(jié)構(gòu)用更加語義化的HTML5標(biāo)簽來實現(xiàn)，包括頁頭、主要內(nèi)容部分、側(cè)邊欄和頁腳。

對桌面電腦而言，960px適用于任何寬于1024像素的分辨率。通過媒體查詢來監(jiān)測寬度小于960px的屏幕分辨率，并設(shè)置流體布局寬度，意即布局元素的寬度可隨瀏覽器窗口的尺寸變化進(jìn)行調(diào)整。當(dāng)可視部分的寬度進(jìn)一步減小到650px以下時，主要內(nèi)容部分的容器寬度會增大至全屏，而側(cè)邊欄將被置于主內(nèi)容部分的下方，整個頁面變?yōu)閱螜诓季帧?/p>

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

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

（2）彈性圖片與文字

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

為實現(xiàn)文字的自適應(yīng)縮放，使用em替換px。em值是相對其父級元素的字體大小而言的。公式為“目標(biāo)元素尺寸÷父級元素尺寸=百分比尺寸”，可將文字的絕對值尺寸轉(zhuǎn)換為相對值尺寸。

4 結(jié)語

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

[1]Ethan Marcotte．Responsive Web Design[EB/OL]．http：//www．a(chǎn)lisapart．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]張樹明．基于響應(yīng)式Web設(shè)計的網(wǎng)頁模板的設(shè)計與實現(xiàn)[J]．計算機與現(xiàn)代化,2013,1(6)：125-127．

[5]熊瑞英,王寧．響應(yīng)式Web設(shè)計[J]．科技創(chuàng)新導(dǎo)報,2015,12(26)：64-65．

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