基于HTML5的響應式展會信息移動平臺設計與實現

范宇超　廖劍強　鄧秀勤　林楚泉

摘 要： 響應式網頁設計是針對不同尺寸移動設備而誕生的技術，該技術很好地解決了由于不同尺寸設備引起的錯誤問題。在移動設備成為大眾獲取信息的主要渠道的背景下，結合展會信息服務，應用響應式網頁設計技術，設計并實現了一個展會信息移動平臺，該平臺的構建為展會信息的傳播和商家供求信息的發布提供了一條便利的途徑，對促進中小企業的發展具有重大現實意義。

關鍵詞： 響應式網頁設計； 移動設備； 展會信息服務； 信息平臺

中圖分類號：TP315 文獻標志碼：A 文章編號：1006-8228（2014）03-24-03

0 引言

隨著計算機網絡技術的發展， 網絡展會以其獨特的優勢表現出越來越強的獨立性，尤其是對一些以外貿客戶為主的展覽來說，網絡會展有著無限的潛力[1]。網絡展會能為用戶提供更多的信息服務、匹配服務以及交易服務等[2]，并且有影響范圍廣，信息傳播量大的特點，且信息傳遞快捷、成本比較低廉，所以受到越來越多的用戶的親睞[3]。無論是對于要求低成本、高效率的主辦方，還是對于需預期了解目標市場以及方便資源整合的參展商，或者是對于要求方便快捷的采購商，網上會展的出現都很好地解決了傳統實物會展因場地、資金等因素出現的問題，從而大大促進了會展行業的發展[4]。

雖然網絡展會的經濟性給企業帶來了可觀的經濟利益，對傳統實物展會構成了巨大的沖擊，但是由于實物展會的獨特性和網絡展會的缺陷，注定了網絡展會不可能替代實物展會[5]。而在現今信息泛濫的時代，信息正確的傳播以及高效的獲取才是展會行業發展的重中之重。

人們對信息的獲取逐漸依賴于日益發展的網絡，但對于不同尺寸的終端，信息的傳播方式有所不同。無論是傳統的大屏幕桌面電腦，還是平板電腦或手機，可以從中獲取的信息量是相當大的，那么人們選擇獲取信息的方式自然就取決于信息獲取的便利程度。這就使得絕大部分人隨身攜帶的手機自然而然地成為人們獲取信息的首選工具。

有數據顯示從2008年到2013年，兩大主流手機系統Android和ISO全球手機瀏覽器的使用量分別從1.7%和21.68%上升到30.94%和23.9%（圖1）[6]。這說明使用手機或平板電腦等移動設備瀏覽器獲取信息已成為主流趨勢。

圖1 2008年至2013年手機瀏覽器使用比例

根據以上的數據分析，本文以響應式網頁設計技術為基礎，詳細介紹展會信息移動平臺的設計與實現。

響應式網頁設計（RWD， Responsive Web Design）這個術語是由伊桑·馬科特（Ethan Marcotte）提出的[7]。他在A List Apart發表了一篇極具創新性的文章，將三種已有的開發技巧（彈性網格布局、彈性圖片和媒體查詢）整合起來，并命名為響應式網頁設計。也稱為流式設計、彈性布局、塑料布局、流體設計、自適應布局、跨設備設計以及彈性設計。

這種網頁設計的新方法使用百分比布局創建流動的彈性界面，同時使用媒體查詢來限制元素的變動范圍。實現了針對任意設備對網頁內容進行完美布局的一種實現機制[8]。

在移動設備成為大眾獲取信息的主要渠道的背景下，本文主要結合展會信息服務，以響應式網頁設計為基礎，對展會信息移動平臺進行設計與實現。

1 網站架構與功能

根據DailyTech的統計，到2015年，移動互聯網的用戶數量將會超過桌面用戶。除了智能手機之外，使用平板電腦上網的用戶也越來越多[9]。在這種形勢下，怎樣讓我們的網站盡量兼容各種類型的設備，并確保良好的用戶體驗，將會對網站的運營起到很大的推動作用。

本文所設計的網站通過使用響應式的設計開發方式，使網站頁面隨瀏覽設備的不同尺寸而自行響應，動態地調整布局結構、元素規格樣式，將內容按照不同的格式呈現給使用不同設備尺寸的用戶；更好地進行代碼重構，避免了為各種不同的移動終端開發不同版本頁面的重復性工作，節約了開發時間和成本。

圖2 不同尺寸屏幕的兼容方式

響應式設計其實就是通過彈性網格布局、彈性圖片和媒體查詢的整合使用，達到更好地調整分辨率的問題。（如圖2所示）不同的設備有著不同的分辨率、清晰度以及屏幕定向方式，怎樣才能做到讓一種設計方案兼容所有情況將顯得特別重要。我們的處理方案是讓頁面盡量彈性化，讓文字、圖片的尺寸可以自動調整，做到無論用戶切換設備的屏幕定向方式，還是從臺式機屏幕轉到平板電腦或手機上瀏覽，頁面都會真正富有彈性。下面是我們設計網站時使用HTML5和CSS3 Media Queries（層疊樣式表媒介查詢）相關技術來實現響應式Web設計的方案。

1.1 CSS3 Media Queries-打造彈性布局結構

實現自適應頁面設計的關鍵之一是，使用CSS3根據分辨率寬度的變化來調整頁面布局結構。CSS3支持CSS2.1所支持的所有媒體類型，例如screen、print、handheld等，同時還添加了很多涉及媒體類型的功能屬性，包括max-width（最大寬度）、device-width（設備寬度）、orientation（屏幕定向，橫屏或豎屏）等。現在的主流設備，如iPad或Android相關設備，都可以完美地支持這些屬性。

下面的幾個例子，將展示如何使用CSS3 Media Queries實現不同的樣式表。

/*瀏覽器或屏幕寬度超過500px時使用*/

@media screen and （min-width： 500px） {

.myClass {

width： 30%；

float： right；

}

}

/*瀏覽器或屏幕寬度小于500px時使用 */

@media screen and （max-width： 500px）

{ .otherClass

{ clear： both；

font-size： 1em；

}

}

將上述屬性組合使用，可以用來鎖定某個屏幕尺寸范圍：

/*瀏覽器窗口或屏幕寬度在800px至1200px之間時使用 */

@media screen and （min-width： 800px） and （max-width：

1200px） {

.someClass

{ background： #cc0000；

width： 30%；

float： right；

}

}

1.2 JavaScript-提高兼容性

JavaScript也是重要的工具之一，特別是當某些舊設備無法完美支持CSS3的Media Queries時，JavaScript可以完美實現兼容。專門的JS庫（css3-mediaqueries.js）可幫助舊瀏覽器（IE 5+，Firefox 1+，Safari 2等）支持CSS3的Media Queries。對于那些尚不支持Media Queries的瀏覽器，本文主要是通過在頁面中調用css3-mediaqueries.js來解決兼容性問題。

<！--[if lt IE 9]>

<！[endif]-->

下面的代碼演示了怎樣使用簡單的幾行jQuery代碼來檢測瀏覽器寬度，并為不同的情況調用不同的樣式表：

可以看出，借助JavaScript，我們可以實現更多的變化，從而使我們設計的網頁更加動態化地實現兼容性，提高頁面彈性。

1.3 HTML5-進一步渲染頁面

在HTML5發布之前，讓表單風格與瀏覽器保持一致是很困難的事情，而且更重要的是需要Javascript來驗證表單輸入，復雜的正則表達式成為了開發者的一大難題，好消息是HTML5基本上解決了這些常見的問題，讓開發人員開發效率迅速提高，縮短開發周期。HTML5代碼主要用于后臺登錄、展會資訊管理，當我們要驗證帳號密碼、添加展會信息到數據庫，或者更改展會信息時，表單的使用是不可缺少的。

后臺登錄界面的顯示，主要利用了placeholder和required兩個屬性。這兩個屬性使用起來非常方便，可以實現豐富的功能。登錄界面通常需要在表單域顯示占位符文字，這時只需要在input元素加入placeholder屬性，其屬性值就會默認顯示為占位文字，當輸入框獲得焦點時文字就會自動消失，當輸入框失去焦點，但又沒有輸入任何值時，占位符會再次顯示。Required屬性，顧名思義，表示這個屬性是必須要賦值的，在input元素里面追加此屬性，則表明該表單域為必須填寫。代碼如下：

"請輸入用戶名" required>

僅僅這一行代碼，就可以代替復雜的JS代碼，簡潔方便。用chrome瀏覽器測試如圖3所示。

2 結束語

本文基于對響應式網頁設計的應用，通過對CSS3樣式的設計，構造了基于不同尺寸屏幕的樣式表，并利用Javascrip技術解決舊設備的兼容性問題，HTML5編寫表單也簡單高效地解決了后臺登錄以及展會資訊管理中存在的問題。

圖3 登錄界面測試

本文通過運用響應式網頁設計思想實現了網頁模塊在不同尺寸設備下良好的顯示效果，進一步增強了網站的兼容性和互動性，很好地體現出響應式網站相對于傳統網頁的優越性。但就現實來說，傳統網頁仍占較大比例，響應式技術還沒有被廣泛應用，相信在今后移動互聯網浪潮的推動下，響應式技術也會得到迅速發展與普及。

參考文獻：

[1] 中國國際貿易促進委員會展會新聞http：//www.ccpit.org/

Contents/Channel_1071/2007/0801/55560/content_55560.htm

[2] 蔡瑞初，趙駿凱，鄧強等.網絡會展電子商務功能分析——以“網上廣

交會”網站分析為例[J].電腦知識與技術，2011.7（24）.

[3] 錢小輪.從“2010上海網上世博會”看網絡技術對當代會展業發展的

積極作用與影響[C].2011中國會展經濟研究會學術年會論文集，2011：160-164

[4] 黃峰，付業勤.我國網絡會展發展研究[J].黑河學刊，2009.5：014

[5] 張鈺.基于Web會展信息服務平臺的設計與實現[D].北京工業大學，

2010.

[6] 數據與圖均來自http：//gs.statcounter.com

[7] Marcotte E. Responsive web design[J]. A List Apart，2010：306

[8] Frain B. Responsive web design with HTML5 and CSS3[M].Packt

Publishing Ltd，2012.

[9] http：//www.dailytech.com/