響應式Web設計的研究與實現

郭彥輝

（廣州番禺職業技術學院 藝術設計學院，廣東 廣州 511483）

0 引言

隨著各類上網設備的發展和普及使用，用戶使用智能手機、平板電腦、桌面電腦和筆記本電腦等設備訪問網站的情況普遍。如何使網站內容在各種不同屏幕分辨率下保持良好的顯示效果，并使用戶獲得良好的體驗是需要關注和解決的問題。自從Ethan Marcotte提出響應式 Web設計（RWD，Responsive Web Design）[1]概念以來，其設計方法能夠使同一網站兼容不同終端設備的訪問，而不需要為每個終端定制開發相應的版本，可以有效降低網站開發的復雜性和維護的難度。這種設計方法對于高職院校的網站建設來說同樣具有應用價值。本文以學校的招生信息網站改版設計為例，介紹該網站響應式設計實現的過程及技術要點。

1 網站改版需求分析與規劃

廣州番禺職業技術學院原招生信息網站由多個獨立運行的子網站構成，這些子站面向的招生類型不同，先后獨立規劃設計、開發和管理。隨著學校招生宣傳和服務工作的推進，網站的內容與功能需求有所變化，需要重新規劃設計與開發。為了便于今后對網站的統一管理與維護，同時，也為滿足網站來自移動設備訪問的需求，此次網站改版的內容主要包括兩個方面：（1）將原有多個子站合并成為單獨一個網站，并使用網站群系統來實現網站的后臺管理功能，學校相關的招生信息將集中統一發布在該網站上。（2）采用響應式設計使網站能夠兼容多種主流的終端設備，并且保持統一的設計風格。

在新版招生信息網站的規劃中，對原先各子站的內容和功能模塊進行調整合并，重新設計網站的信息架構和頁面布局。新版網站主要包括招生計劃、報考指南、招生咨詢和錄取查詢等主要欄目內容。

2 響應式招生信息網站的實現

2.1 頁面設計及構建

以往進行網頁設計時，會先以桌面電腦顯示器分辨率作為參考進行固定寬度設計，再針對小屏幕進行內容重排。在響應式設計中，應該先針對小屏幕進行設計，再逐步增強針對大屏幕的設計和內容[2]。在智能手機這類小屏幕設備設計中，網站內容按照重要程度自上而下排列顯示，內容元素和屏幕等寬，布局結構以豎向單列顯示。布局隨著設備屏幕尺寸變寬其結構也由單列變成多列形式，頁面最寬時適合于桌面電腦的顯示。網站首頁頁面設計簡稿如圖1所示。

圖1 不同顯示下的頁面設計簡稿Fig.1 Brief manuscript with different visual for webpage design

網站首頁的html結構大致如下：