校園響應式網(wǎng)頁設計應用研究

謝日敏　鄭佳芳

摘要：該文闡述了響應式網(wǎng)頁設計的主要技術特點，并對基于響應式網(wǎng)頁設計理念的前端框架進行比較分析，為解決在各類終端設備上進行跨平臺的網(wǎng)頁自適應問題提供了新思路。

關鍵詞：響應式網(wǎng)頁設計

圖分類號：TP393.092 文獻標識碼：A 文章編號：1009-3044（2015）14-0209-02

Abstract： This paper described the main technical characteristics of responsive web design. comparison of different front-end frameworks based on the concept of responsive web design. The purpose of the study to solve the problem on all kinds of terminal equipment for the cross-platform web adaptive provided a new way of thinking.

Key words： responsive web design

隨著互聯(lián)網(wǎng)的發(fā)展，移動版的網(wǎng)站得到廣泛的青睞。用戶希望能夠開發(fā)一種兼容性強的web應用，即可以適應Iphone手機、Andriod手機、PC機及平板電腦等終端應用，又具有良好的用戶體驗。傳統(tǒng)的web設計是針對不同的終端，依據(jù)用戶需求開發(fā)不同終端頁面效果。因此，對設計開發(fā)人員而言，將大量的精力放在了業(yè)務應用表現(xiàn)層的復雜設計上。Ethan Marcotte 在2010 年提出響應式網(wǎng)頁設計（Responsive Web Design），為不同終端用戶提供了更友好的用戶體驗[1]。

1 響應式網(wǎng)頁設計

響應式網(wǎng)頁設計針對不同的屏幕尺寸和系統(tǒng)平臺，能夠及時響應用戶行為情景。當用戶從便捷電腦轉(zhuǎn)換到平板電腦時，頁面的圖片大小和腳本功能 能夠自動適應用戶體驗。也就是，網(wǎng)站能夠自適應用戶的喜好，其主要消除了為適應新終端的業(yè)務應用，而重新進行頁面設計的重復作業(yè)[2]。

響應式網(wǎng)頁設計不只是屏幕分辨率可調(diào)和圖像大小自動調(diào)整，而是一種全新網(wǎng)頁設計思維方式。現(xiàn)有響應式設計技術主要包括以下特征[3-4]：

1）移動優(yōu)先（Mobile First）

移動優(yōu)先是響應式網(wǎng)頁設計中性能設計的重要組成部分。在響應式網(wǎng)頁設計中，網(wǎng)頁最主要的部分是設計為移動優(yōu)先，使得敏感的設計是以桌面網(wǎng)站的方式或類似的隱藏技術來替換，從而提升用戶體驗感覺。

2）層疊樣式轉(zhuǎn)換和媒體查詢（CSS Transitions and Media Queries）

使用層疊樣式轉(zhuǎn)換和媒體查詢依據(jù)瀏覽器的寬度，實現(xiàn)自適應頁面布局，從而查閱網(wǎng)站內(nèi)容時，可以快速無縫的在不同頁面風格之間進行跳轉(zhuǎn)。

3）響應式數(shù)據(jù)表（Responsive Data Tables）

傳統(tǒng)數(shù)據(jù)表從PC端轉(zhuǎn)換到移動端，往往由于縮小整個數(shù)據(jù)表，導致字體變化而不可閱讀。響應式數(shù)據(jù)表就是要重新格式化表，使其具有更好的可讀性。

4）響應式導航菜單（Responsive Navigation Menus）

在終端屏幕縮小時，原有固定橫向菜單的鏈接方式轉(zhuǎn)換為一種下拉式菜單，替換原有的菜單項。

5）流式布局（Fluid Layouts）

以往有四種不同的布局類型：固定寬度的布局，液態(tài)布局，彈性布局和混合布局，其各有優(yōu)缺點。流式布局通過設置布局的百分比以及CSS 的浮動屬性等技巧使得響應式網(wǎng)頁設計更加靈活。

6）響應式圖像（Responsive Images）

響應式圖像采用一種上下文感知圖像尺寸方式，為不同分辨率下圖像尺寸不同布局的情況，提供背景圖像尺寸響應優(yōu)化方法。

由于響應式網(wǎng)頁設計近幾年才發(fā)展起來，各類技術還需不斷的進行優(yōu)化和改進，但隨著類似Google企業(yè)也建議優(yōu)先采用響應式設計，使得更多的團隊加入到響應式網(wǎng)頁設計研發(fā)當中，出現(xiàn)了不少基于響應式網(wǎng)頁設計理念的前端框架。

2 前端框架比較分析

通過表1對主流響應式網(wǎng)頁設計的前端框架進行比較分析，表明Bootstrap在國內(nèi)外具有較高的支持度，而支持語義化的Semantic UI在國外具有較強的競爭優(yōu)勢[5]。

4 結(jié)束語

校園響應式網(wǎng)頁設計，必須從流行性、可持續(xù)發(fā)展、成熟的特點以及完善的文檔支撐進行考量。在項目實踐過程中，響應式網(wǎng)頁設計必須與相關網(wǎng)站開發(fā)產(chǎn)品進行集成，解決各類終端界面自適應問題，增強網(wǎng)站的可持續(xù)性和可維護性。

參考文獻：

[1] Marcotte E. Responsive web design[M]. Editions Eyrolles， 2011.

[2] Knight K. Responsive web design： What it is and how to use it[J]. Smashing Magazine， 2011.

[3] Frain B. Responsive web design with HTML5 and CSS3[M]. Packt Publishing Ltd， 2012.

[4] Fielding J. Beginning Responsive Web Design with HTML5 and CSS3[M]. Apress， 2014.

[5] Jain N. review of different responsive css front-end frameworks[J]. Journal of Global Research in Computer Science，2015，5（11）：5-10.