響應式網頁設計在高校網站建設中的應用

薛鵬飛

本文以高校網站建設作為研究課題，分析了在當今移動互聯網時代，高校網站在用戶體驗方面的現狀以及存在的問題，引出了響應式網頁設計的概念，并介紹了使用響應式網頁設計來建設高校網站的優勢和方法，旨在推動響應式網頁設計在高校網站建設中的應用。

1引言

當今網站已經成為各行各業，乃至很多人的標配名片，當想了解某些未知信息時，第一時間想到的就是去網上搜索了解信息。然而隨著時代的發展，我們的使用場景發生了變化，以前我們上網用的是臺式電腦（PC），而現在我們使用最多的是移動設備。據著名網站通信流量監測機構StatCounter于2019年6月統計數據顯示，我國網民使用手機端的市場份額為58.03 %，PC端的市場份額為40.26 %，平板電腦的市場份額為1.71 %。可見在我國有一半以上的網民使用手機來上網瀏覽信息。傳統的網站在建設時沒有考慮到移動設備的顯示和兼容問題，導致在移動設備上的用戶體驗不友好。因此，設計一個能夠同時適配PC和移動設備，并且具有良好用戶體驗的網站是每個網站主都要考慮的問題。

2響應式網頁設計

在響應式網頁設計的概念提出之前，網站前端開發者們為了使網站能夠適配各種終端設備（PC、手機和平板電腦等），往往會專門針對不同的終端設備開發出相適配的版本，即一個網站針對不同的終端設備開發出不同的前端版本，從而達到相同的用戶體驗，但是，如果有幾十種甚至上百種不同型號的終端設備，難道都要為其單獨開發嗎？顯然這樣的做法并不科學，大大增加了網站的開發成本以及日后的修改成本。

于是在2010年5月，一位名為伊桑·馬科特的網頁設計師首次提出了響應式網頁設計（Responsive Web Design）的概念，即為網站開發一個版本的樣式，便能自動兼容并適配各種終端設備，且能同時達到相同的用戶體驗。可以說響應式網頁設計的出現，不僅降低了網站的開發成本，還解決了終端設備的兼容問題，同時各大搜索引擎也更喜歡響應式網頁設計的網站，響應式網頁已成為網站前端設計的首選。

3高校網站使用響應式網頁設計的現狀

雖然響應式網頁設計的概念早就提出了，但是在我國直到2015年才開始逐漸流行起來（可能與PC和移動設備的市場份額有關），而高校網站使用的響應式網頁設計技術相對比較落后，筆者對全國10個省份，每個省隨機抽取了10所高校門戶網站以及招生網站統計發現，其中門戶網站使用響應式網頁設計的高校有43 %，招生網站使用響應式網頁設計的高校只有10 %。

從數據和筆者工作的經驗來看，高校網站使用響應式網頁設計相對落后的原因一是管理者不夠重視，沒有意識到網站還需要適配移動設備，二是缺少專門進行學校網站開發的專職人員，因此對于新技術的應用還需要一定的時間過程。不過近幾年來，越來越多的高校門戶網站已經逐漸開始使用響應式網頁設計了。

4響應式網頁設計的方法

4.1響應式網頁設計的技術原理

一個標準的網頁一般由結構（HTML，XML，XHTML）、表現（CSS）和行為（DOM、ECMAScript）三部分組成，其中結構和表現部分則為響應式網頁設計的重要部分，另外CSS3標準的建立也為響應式網頁設計奠定了基礎。響應式網頁設計的核心技術一般由以下三部分組成：

（1）媒體查詢（Media Queries）

媒體查詢又稱為媒介查詢，即通過CSS3的@media聲明來查詢展示媒介（終端設備）的顯示尺寸，根據不同尺寸的終端設備來選擇不同的CSS樣式，從而達到網頁能自動適配多種終端的效果。@media聲明從CSS3開始才被支持，現在的移動設備中的瀏覽器均支持CSS3，只有PC端的一些老舊瀏覽器不支持，如IE8以前的版本，很多網站已經放棄這些老舊的瀏覽器。媒體查詢示例代碼如下：

@media screen and（min-width： 768px）{這里設置您的CSS樣式代碼}

（2）網格布局（Flexible Grids）

這里的網格布局是一個寬泛的概念，即結合了流式布局、彈性布局和柵格布局的特性，把整個網頁劃分成一個個網格，網頁上每個網格可以任意組合，最終表現為一個個內容塊。通過與媒體查詢配合，同時運用流式布局中以百分比或混合百分比作為度量單位的方式和彈性布局中Flex技術，從而實現網頁響應式布局的效果。

（3）彈性圖片（Flexible Images）

響應式網頁設計中，處理好圖片也非常重要。因為現在的網站往往會使用大幅圖片來展示內容，這就需要根據終端設備的寬度來自動調整圖片的寬度，從而達到更好的顯示效果。通常的做法是將圖片寬度以百分比來度量，配合max-width或background-size等CSS屬性來完成。

4.2目前主流響應式網頁設計開發框架介紹

我們在做網站前端開發的時候，可以借助一些前端開發框架來幫助快速開發網站，這些前端開發框架的原理其實就是將布局系統、排版樣式、導航樣式、表單樣式、按鈕樣式和表格樣式等封裝好，我們只需要直接拿來引用，而不需要單獨的為每個HTML標簽寫CSS樣式，還能提高界面的美觀性。目前支持響應式網頁設計的開發框架有很多，甚至自己也可以開發一套適合的開發框架，下面介紹幾種主流的響應式網頁設計開發框架。

（1）Bootstrap

由Twitter的工程師開發，是一款集合HTML、CSS和JavaScript的框架，用于開發響應式布局、移動設備優先的網站，且免費開源，擁有龐大的社區支持。

（2）Foundation

由一家專業的產品設計公司ZURB開發，是目前在商業領域使用最為廣泛的一款響應式前端開發框架，是一個易用、強大而靈活的框架，且免費開源。

（3）GroundworkCSS 2

同樣是一款響應式HTML、CSS和Javascript的框架，其官網還提供大量的在線展示示例和開發文檔，且免費開源。

4.3使用響應式前端開發框架來開發高校網站

面對如此繁多的前端開發框架，高校網站只需要挑選其中一款即可滿足需求。通常高校網站前端開發步驟如下（這里僅僅提供一種思路，具體設計開發的細節不展開）：

第一步設計界面，用網格布局的原理，將高校網站的內容設計成一個個區塊，比如從頁面頂端依次到頁面的底端，一般為網站Logo、導航菜單、大圖輪播、主要欄目列表、底部聯系方式、備案信息和新媒體二維碼等。

第二步選擇一款主流的前端開發框架，通過前端開發框架的實例，找到適合的界面設計實例，直接拿來使用就可以。

第三步開發調試您的網站，使用Chrome開發者工具可以高效調試您的網站。

這里要注意的一點是，為了確保移動終端的適當縮放，需要在HTML代碼的之中添加viewport元數據標簽，并設置成

5結束語

隨著移動互聯網的興起，網站前端開發技術也得到了一次又一次的革新，其中響應式網頁設計解決了當下的用戶痛點，但是也不能盲目地追新技術，我們使用響應式網頁設計的目的是為了讓用戶有更好地體驗，滿足用戶的需求。最后筆者建議高校作為教育機構，在大多數高校均開設了相應的網站前端開發課程前提下，對于高校自身的網站建設方面，理應優先提供更好的網站用戶體驗，起到示范和教育作用。