響應(yīng)式網(wǎng)頁設(shè)計在高校網(wǎng)站建設(shè)中的應(yīng)用

薛鵬飛

本文以高校網(wǎng)站建設(shè)作為研究課題，分析了在當今移動互聯(lián)網(wǎng)時代，高校網(wǎng)站在用戶體驗方面的現(xiàn)狀以及存在的問題，引出了響應(yīng)式網(wǎng)頁設(shè)計的概念，并介紹了使用響應(yīng)式網(wǎng)頁設(shè)計來建設(shè)高校網(wǎng)站的優(yōu)勢和方法，旨在推動響應(yīng)式網(wǎng)頁設(shè)計在高校網(wǎng)站建設(shè)中的應(yīng)用。

1引言

當今網(wǎng)站已經(jīng)成為各行各業(yè)，乃至很多人的標配名片，當想了解某些未知信息時，第一時間想到的就是去網(wǎng)上搜索了解信息。然而隨著時代的發(fā)展，我們的使用場景發(fā)生了變化，以前我們上網(wǎng)用的是臺式電腦（PC），而現(xiàn)在我們使用最多的是移動設(shè)備。據(jù)著名網(wǎng)站通信流量監(jiān)測機構(gòu)StatCounter于2019年6月統(tǒng)計數(shù)據(jù)顯示，我國網(wǎng)民使用手機端的市場份額為58.03 %，PC端的市場份額為40.26 %，平板電腦的市場份額為1.71 %?？梢娫谖覈幸话胍陨系木W(wǎng)民使用手機來上網(wǎng)瀏覽信息。傳統(tǒng)的網(wǎng)站在建設(shè)時沒有考慮到移動設(shè)備的顯示和兼容問題，導(dǎo)致在移動設(shè)備上的用戶體驗不友好。因此，設(shè)計一個能夠同時適配PC和移動設(shè)備，并且具有良好用戶體驗的網(wǎng)站是每個網(wǎng)站主都要考慮的問題。

2響應(yīng)式網(wǎng)頁設(shè)計

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

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

3高校網(wǎng)站使用響應(yīng)式網(wǎng)頁設(shè)計的現(xiàn)狀

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

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

4響應(yīng)式網(wǎng)頁設(shè)計的方法

4.1響應(yīng)式網(wǎng)頁設(shè)計的技術(shù)原理

一個標準的網(wǎng)頁一般由結(jié)構(gòu)（HTML，XML，XHTML）、表現(xiàn)（CSS）和行為（DOM、ECMAScript）三部分組成，其中結(jié)構(gòu)和表現(xiàn)部分則為響應(yīng)式網(wǎng)頁設(shè)計的重要部分，另外CSS3標準的建立也為響應(yīng)式網(wǎng)頁設(shè)計奠定了基礎(chǔ)。響應(yīng)式網(wǎng)頁設(shè)計的核心技術(shù)一般由以下三部分組成：

（1）媒體查詢（Media Queries）

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

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

（2）網(wǎng)格布局（Flexible Grids）

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

（3）彈性圖片（Flexible Images）

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

4.2目前主流響應(yīng)式網(wǎng)頁設(shè)計開發(fā)框架介紹

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

（1）Bootstrap

由Twitter的工程師開發(fā)，是一款集合HTML、CSS和JavaScript的框架，用于開發(fā)響應(yīng)式布局、移動設(shè)備優(yōu)先的網(wǎng)站，且免費開源，擁有龐大的社區(qū)支持。

（2）Foundation

由一家專業(yè)的產(chǎn)品設(shè)計公司ZURB開發(fā)，是目前在商業(yè)領(lǐng)域使用最為廣泛的一款響應(yīng)式前端開發(fā)框架，是一個易用、強大而靈活的框架，且免費開源。

（3）GroundworkCSS 2

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

4.3使用響應(yīng)式前端開發(fā)框架來開發(fā)高校網(wǎng)站

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

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

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

第三步開發(fā)調(diào)試您的網(wǎng)站，使用Chrome開發(fā)者工具可以高效調(diào)試您的網(wǎng)站。

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

5結(jié)束語

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