薛鵬飛

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

1引言

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

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

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

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

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

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

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

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

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

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

（1）媒體查詢（Media Queries）

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

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

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

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

（3）彈性圖片（Flexible Images）

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

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

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

（1）Bootstrap

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

（2）Foundation

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

（3）GroundworkCSS 2

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

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

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

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

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

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

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

5結(jié)束語(yǔ)

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