基于響應式的大學生競賽服務網站的設計

陳飛旭

隨著移動網絡的普及，用戶使用移動設備上網已經成為了一種趨勢。為使得網站能夠兼容更多類型的設備，保證用戶有一個良好的體驗，在網站設計時必須使用響應式Web技術。

【關鍵詞】響應式Web 媒體查詢 彈性圖片 viewport

近些年來移動智能設備發展迅猛，用戶可以在個人電腦、平板電腦、智能手機等各種終端上訪問一個網站。傳統的Web設計技術已經適應時代的發展，無法保證在從屏幕像素大小不同的設備上訪問網站時都能夠得到一個良好的顯示。

我們在開發大學生競賽服務網站時也遇到了類似的問題，經過認真的研究，最終利用響應式Web設計技術解決了這一問題。本文將通過探討響應式的Web設計方式，研究如何構建一個網站，使之能夠自動適應不同的網站訪問設備，通過動態調整網頁的布局結構和顯示樣式，把相同的內容以不同的格式呈現出來，做到“一源多屏”。

1 響應式Web

2010年Ethan Marcotte提出了一種響應式網頁設計理念[1]，它使得網頁可以根據用戶行為以及設備環境（系統平臺、屏幕尺寸、屏幕定向等）進行相應的響應和調整。簡單的說，響應式Web頁面，能夠根據不同終端設備，響應用戶的操作自動調整網頁尺寸，達到頁面美觀的效果。響應式Web在設計時需要使用HTML5和CSS3，涉及到媒體查詢（Media Queries）、響應式布局、彈性圖片和viewport 屬性四大關鍵技術。

1.1 媒體查詢

媒體查詢是響應式Web設計的關鍵[2]。媒體查詢可以讓我們根據設備顯示器的特性（如視口寬度、屏幕比例、設備方向：橫向或縱向）為其設定CSS樣式。媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達式組成。媒體查詢中可用于檢測的媒體特性有 width、 height 和 color 等屬性。使用媒體查詢，可以在不改變頁面內容的情況下，為特定的一些輸出設備定制顯示效果。在實際的開發中，網頁設計者可以為不同大小的屏幕分別編寫CSS樣式文件，并在用戶訪問網站時通過@media screen判斷和調用對應的樣式文件。

例如：

@media screen and （min-width：1200px）{.post_box{width： 45%；float： left；} }

@media screen and （min-width：960px）{.post_box{width： 30%；float： left；} }

規定了網頁中的post_box在屏幕分辨率在大于1200px時的寬度為45%，當屏幕大小大于960px且小于1200px時的寬度為30%。

1.2 響應式布局

響應式布局是進行響應式設計的基礎。響應式Web 設計采用響應式布局來滿足不同設備的需求，頁面元素隨著瀏覽器窗口的調整可以自動適配。響應式布局可以通過百分比布局、字號比例和浮動屬性等技術手段完成。

為避免用戶在較小設備瀏覽網站時通過橫向滾動條來查看頁面，對于網頁對象的寬度應該使用“%”為單位的相對尺寸，而不是使用固定像素（px）。上面的例子中，post_box的寬度被設計成百分比尺寸。當顯示屏幕發生改變時，post_box寬度也會發生響應的變化。

在響應式Web中不能使用像素（px）來設置文字的大小，而必須使用字號比例（em）。em可以根據當前基準字號的寬高成比例縮放文字，實現文字大小的響應式變化。

為防止在小屏幕上Web頁面各個div元素的寬度由于擠壓變得細長，需要將網頁中div的位置設置為浮動（float）的。這樣可以解決當屏幕寬度不夠，一行放不下多個區塊的問題。

1.3 彈性圖片

響應式Web設計的思路中，一個重要的因素是怎樣處理圖片方面的問題。網頁中的圖片通常會按照實際尺寸進行顯示，但是在一些小屏幕的設備上，屏幕的實際寬度可能會小于圖片寬度。為了避免使用鼠標拖動才能瀏覽的問題，需要使用彈性圖片技術。彈性圖片指的是不給圖片設置固定尺寸，而是根據流體網格進行縮放，用于適應各種網格的尺寸。彈性圖片技術最早由Richard Rutter提出，即使用CSS的max-width屬性，例如：

img { max-width： 100%；}

上述代碼確保圖片最大的寬度不會超過瀏覽器窗口或是其容器可視部分的寬度，所以當窗口或容器的可視部分開始變窄時，圖片的最大寬度值也會相應的減小，圖片本身永遠不會被容器邊緣隱藏和覆蓋。

1.4 viewport屬性

利用媒體查詢能夠很好的解決網頁在分辨率大小不同的個人電腦瀏覽器上的瀏覽問題，但對于手機或平板瀏覽器等移動終端還是不夠的。因為移動終端的瀏覽器默認頁面是為寬屏幕設計的，它會把頁面自動縮小以適應屏幕，造成的結果就是頁面中的內容太小而影響用戶的閱讀。這個時候就必須使用viewport的meta標簽來做一系列的設置，從而獲取終端設備正確的寬度。

Viewport的使用比較簡單，只需要在網頁的head部分添加如下代碼即可：

2 基于響應式的大學生競賽服務網站的設計步驟

大學生競賽服務網站是我們獲批的一項遼寧省大學生創新創業訓練計劃項目。項目研究的主要內容是：為適應當前大學生創新創業活動的蓬勃發展所開發的一款能夠適用于各類競賽服務的通用支持網站。網站的功能包括完成各類賽事通知的發布；參加競賽的學生可以完成報名、提交作品、展示作品的PPT介紹以及視頻演示等；專家可以對作品進行評比等。

2.1 網站布局

經過分析，瀏覽網站的用戶可能會用PC機、平板電腦和各類手機等設備訪問網站，這些設備的屏幕像素大小不同。因此，我們決定將系統設計成能夠基于響應式的網站。

為實現開發過程的高效簡化，在前端開發中可以使用Foundation、Bootstrap或Pure等CSS框架。我們在設計大學生競賽服務網站時采用了Twitter提供的Bootstrap來進行網頁的布局。Bootstrap是一款移動設備優先的CSS框架，它將所有終端設備分成了：超小屏幕（手機，小于768px）、小屏幕（平板，大于等于768px）、中等屏幕（桌面顯示器，大于等于992px）和大屏幕（大桌面顯示器，大于等于1200px）四類，并通過媒體查詢自動確定當前訪問網站的終端設備的類型。Bootstrap利用流式柵格系統將整個屏幕最多分成12列，每個列的寬度能夠根據屏幕或viewport尺寸的變化而變化。這些特性正是我們在設計大學生競賽服務網站時所需要的。

2.2 響應式圖片

大學生競賽服務網站必須提供作品圖片展示功能。Bootstrap提供的.img-responsive 類可以讓圖片支持響應式布局，適應各類終端設備。.img-responsive 類的實質是設置了width、height 和display，從而在父元素中有較好的縮放。

一致的界面能夠提高網站的品質。Bootstrap內嵌的FontAwesome項目提供了一套高質量的圖標字體。在網站設計的過程中，我們利用該項目美化網頁的同時也大大減少了由于采用圖片作為背景所帶來的網絡流量。

3 結束語

響應式網站的出現代表了移動終端 Web開發的發展趨勢，它通過整合媒體查詢、流動布局和彈性視覺媒體技術來進行頁面設計，實現了“一源多屏”，為多元化的終端用戶提供更加舒適的 Web 界面和良好的用戶體驗，大大減輕了網站前端設計人員的負擔。響應式網站設計必將取代傳統的網站設計方式，成為主流的前端設計方案。

參考文獻

[1]傅翠玉.響應式Web設計探究[J].信息與電腦，2016（09）：79-80.

[2]王朋，董愛華，鮑萍萍.響應式Web的研究與應用[J].微型機與應用，2016（10）：15-17，21.

作者單位

遼寧石油化工大學 計算機與通信工程學院 遼寧省撫順市 113001