劉 歡，盧蓓蓉

（華東師范大學(xué) 信息化辦公室，上海 200062）

一、概述

隨著移動設(shè)備在校園師生中的日益普及，高校網(wǎng)站來自移動端的瀏覽量越來越大。以華東師范大學(xué)門戶網(wǎng)站為例，2012年移動設(shè)備訪問量為2011年的3倍，占總訪問量的6.71%，且該比例正在迅速上升中。為了適應(yīng)日益增長的校園移動瀏覽需求，高校門戶網(wǎng)站需要進行相應(yīng)改進，使網(wǎng)站能夠在各種移動設(shè)備上有良好的表現(xiàn)。其中，響應(yīng)式設(shè)計（Responsive Web Design）作為一種新型技術(shù)手段，能夠使網(wǎng)站針對不同設(shè)備環(huán)境進行響應(yīng)和調(diào)整，實現(xiàn)同一個網(wǎng)站對多種設(shè)備的兼容。[1]這對于高校構(gòu)建適應(yīng)移動設(shè)備的新型門戶網(wǎng)站具有重要應(yīng)用價值。

在響應(yīng)式設(shè)計之前，高校網(wǎng)站的移動端服務(wù)通常是通過專門的移動版網(wǎng)站來實現(xiàn)。移動版網(wǎng)站是常規(guī)網(wǎng)站的內(nèi)容復(fù)制，其對頁面內(nèi)容和功能進行了精簡，以提升移動設(shè)備上的網(wǎng)站載入速度，同時調(diào)整了頁面外觀以適應(yīng)移動設(shè)備屏幕顯示。當網(wǎng)站檢測到用戶訪問來自于移動設(shè)備時，將跳轉(zhuǎn)至移動版頁面進行顯示。移動版網(wǎng)站的優(yōu)點是頁面呈現(xiàn)效果好、節(jié)省流量，最初在手機端體現(xiàn)了良好的效果。然而，近年來移動設(shè)備的種類越來越多，至今移動版網(wǎng)站不僅要適應(yīng)iPhone、Android、Windows Phone等手機平臺，還需要考慮諸如iPad、Kindle、Galaxy Note等平板設(shè)備。如果為每種設(shè)備都定制開發(fā)相應(yīng)的移動版網(wǎng)站，其開發(fā)和維護成本都非常高昂，一旦主站點有任何修改，移動版網(wǎng)站的修改工作量將會成倍增加。

相比之下，響應(yīng)式設(shè)計使用了更加具有彈性的機制。只需要設(shè)計和開發(fā)一個網(wǎng)站，就能夠在各種不同分辨率的電腦和移動設(shè)備端實現(xiàn)自適應(yīng)顯示。對于高校門戶網(wǎng)站而言，這是一種既節(jié)省開發(fā)和維護成本，又能夠獲得良好表現(xiàn)效果的移動端解決方案。目前，華東師范大學(xué)、復(fù)旦大學(xué)等國內(nèi)高校已經(jīng)在其門戶網(wǎng)站中使用了響應(yīng)式設(shè)計。

二、響應(yīng)式設(shè)計簡介

響應(yīng)式設(shè)計是一種技術(shù)路線而非單純的網(wǎng)站設(shè)計，其主要原理是在頁面流式布局的基礎(chǔ)上，通過CSS3的Media Queries調(diào)整頁面元素在不同屏幕分辨率下的顯示，并結(jié)合JavaScript實現(xiàn)頁面交互功能。響應(yīng)式設(shè)計在設(shè)計理念、技術(shù)路線等方面都與傳統(tǒng)網(wǎng)站有所差異。

1.設(shè)計理念

響應(yīng)式設(shè)計的網(wǎng)站設(shè)計理念和傳統(tǒng)網(wǎng)站有著很大區(qū)別。傳統(tǒng)網(wǎng)站的設(shè)計通常是固定布局，設(shè)計元素的大小和內(nèi)容的顯示位置都精確到像素，網(wǎng)站的內(nèi)容主體有著具體的寬度。特別是在設(shè)計傳統(tǒng)網(wǎng)站時，設(shè)計師通常會先固定一塊特殊尺寸的畫布，作為虛擬的瀏覽器屏幕區(qū)域，然后在該區(qū)域中設(shè)計和定位各種元素。在某個特定屏幕分辨率下，傳統(tǒng)網(wǎng)站通常能夠獲取最佳的瀏覽效果，但在更大或更小的分辨率下，網(wǎng)站可能產(chǎn)生橫向滾動條，或在頁面兩側(cè)產(chǎn)生空白區(qū)域。

相比之下，響應(yīng)式設(shè)計更強調(diào)設(shè)計的靈活性。網(wǎng)站內(nèi)容的排布不局限于某個特殊的瀏覽器窗口大小，而是根據(jù)窗口大小進行靈活的布局，其中每個頁面元素的位置、大小甚至表現(xiàn)形式都是動態(tài)的。如菜單欄在較大分辨率的屏幕中為橫向顯示，在較小分辨率屏幕中則為縱向顯示，在更小分辨率屏幕中甚至被折疊起來。相應(yīng)地，在響應(yīng)式設(shè)計中通常會準備多個分辨率下的設(shè)計稿，以體現(xiàn)各種頁面元素的動態(tài)定位。

2.Media Queries

Media Queries是實現(xiàn)響應(yīng)式設(shè)計的核心元素，又被稱作媒體查詢。它是CSS3的一種新特性，用于設(shè)置某種媒體特性 （Media features）下的顯示規(guī)則。如以下的Media Queries定義了屏幕寬度最大為480像素的所有設(shè)備中，

元素的字體大小。

媒體特性的種類非常多，但在響應(yīng)式設(shè)計中主要使用的是max-width、min-width等判斷屏幕尺寸的特性，以及用于判斷設(shè)備方向的orientation特性。通過對不同的屏幕尺寸范圍設(shè)置CSS樣式，就能夠在一個CSS樣式表中定義所有設(shè)備中的顯示。其范圍劃分的精細程度決定了響應(yīng)式設(shè)計能夠兼容設(shè)備的廣度。同時，Media Queries也可以直接寫在頁面的CSS鏈接中，使頁面根據(jù)屏幕分辨率選擇加載不同的CSS文件。

Media Queries是基于HTML5的技術(shù)，幾乎在所有移動設(shè)備上都能得到很好支持，但它在IE6、7、8等不支持HTML5的瀏覽器中將無法執(zhí)行。解決方法是使用JavaScript來實現(xiàn)相同的效果，如css3-mediaqueries.js。[2]

3.流式布局

僅靠Media Queries并不能很好地實現(xiàn)頁面的響應(yīng)式設(shè)計，網(wǎng)頁本身的布局結(jié)構(gòu)也影響并決定了響應(yīng)式設(shè)計是否能夠順利顯示正確的效果。如用表格進行定位的傳統(tǒng)網(wǎng)站，就很難使用Media Queries對冗繁的表格元素設(shè)置響應(yīng)樣式。而根據(jù)響應(yīng)式設(shè)計的理念，元素的定位應(yīng)該是動態(tài)的，并非固定不變，因此最佳的方式是對網(wǎng)頁中的所有元素使用浮動，當頁面寬度無法容納某個元素時，元素將自動浮動至下方顯示，根據(jù)這樣的規(guī)則使所有的頁面元素都獲得合理的定位和布局。這樣的布局方式又稱為流式布局（fluid grid）。流式布局對于屏幕分辨率較小的移動設(shè)備有著重要的意義，用戶不需要再橫向滾動頁面來瀏覽超出瀏覽器寬度的內(nèi)容。

在傳統(tǒng)網(wǎng)站中，頁面元素的大小都精確為某個絕對數(shù)值。然而，在響應(yīng)式設(shè)計中，為了配合流式布局，需要對頁面元素的大小進行百分比設(shè)置，因此某種意義上流式布局也可以稱為百分比布局。

4.Viewport

在移動設(shè)備中，網(wǎng)頁被放在虛擬的窗口中顯示，即viewport。由于普通網(wǎng)頁寬度大于移動設(shè)備的屏幕寬度，viewport通常被移動設(shè)備自動縮放以顯示整個網(wǎng)頁，瀏覽者需要對頁面進行放大和平移才能夠進行瀏覽。而在響應(yīng)式設(shè)計中，由于采用了百分比布局，網(wǎng)頁內(nèi)容的寬度最大為100%，即屏幕寬度，因此不需要對網(wǎng)頁進行任何縮放就能夠在橫向顯示出整個網(wǎng)頁。解決方法是在頁面部位添加meta標記，如：

以上代碼將設(shè)備的寬度和初始縮放值、最大縮放值進行了固定，并去除了瀏覽時設(shè)備屏幕的縮放功能。使移動設(shè)備在不同分辨率下，或在同一分辨率的縱向、橫向狀態(tài)下都能夠忠實地呈現(xiàn)網(wǎng)頁內(nèi)容。

5.JavaScript

響應(yīng)式設(shè)計還體現(xiàn)為針對不同設(shè)備的不同交互功能，如在小屏幕設(shè)備中添加菜單的折疊效果，或是根據(jù)屏幕大小、方向的改變來觸發(fā)某個事件等。這不可避免地需要在前端頁面中使用到JavaScript。其中jQuery作為一款非常流行、輕量級的JavaScript類庫，是響應(yīng)式設(shè)計前端開發(fā)的首要選擇。在jQuery中，可以非常方便地檢測用戶的設(shè)備類型，偵測屏幕大小的改變，并且根據(jù)設(shè)備屏幕大小進行響應(yīng)。

6.常見開源框架

對于需要快速開發(fā)響應(yīng)式設(shè)計網(wǎng)站的人員來說，可以選擇在開源框架的基礎(chǔ)上進行開發(fā)。常見的響應(yīng)式設(shè)計開源框架包括 Foundatiton、BootStrap、The 1140 CSS Grid等，這些框架都有樣式和組件豐富、兼容性好、開發(fā)簡易等優(yōu)點。目前，許多國內(nèi)外高校已經(jīng)使用了開源框架來開發(fā)其門戶網(wǎng)站，如芝加哥大學(xué)網(wǎng)站基于BootStrap[3]開發(fā)，復(fù)旦大學(xué)網(wǎng)站基于Foundatiton開發(fā)等。[3][4]

三、響應(yīng)式設(shè)計在華東師范大學(xué)新版主頁中的實現(xiàn)

鑒于移動化瀏覽的未來趨勢，華東師范大學(xué)門戶網(wǎng)站在2012年進行了改版，在改版中確定了實現(xiàn)響應(yīng)式設(shè)計的技術(shù)目標。以下為響應(yīng)式設(shè)計在華東師范大學(xué)新版主頁中的實現(xiàn)過程。

綜上所述,已有研究多著重于降水的函數(shù)型統(tǒng)計建模,或者不同高度層不同氣象指標的影響分析,對逐日降水的非線性自適應(yīng)統(tǒng)計模擬研究鮮見。基于SOM的蒙特卡羅方法能模擬天氣模態(tài)與逐日降水之間的關(guān)系,不需要預(yù)先明確影響因子之間及其與降水量的具體函數(shù)關(guān)系,具有自學(xué)習(xí)和自適應(yīng)的特點。另一方面,對東北地區(qū)春夏期逐日降水的相關(guān)研究還比較缺乏。因此,本文利用1997—2012年4—7月吉林省地面氣象觀測資料,建立站點逐日降水量的統(tǒng)計模型,并由獨立樣本檢驗期(2013—2015年4—7月)的觀測資料評估該模型的適用性,為進一步利用SOM下的天氣分型模擬未來降水、服務(wù)于吉林省的人工增雨業(yè)務(wù)打下基礎(chǔ)。

1.前期規(guī)劃

高校主頁的外在設(shè)計需要符合高校的形象塑造，其內(nèi)在設(shè)計需要使代碼和功能可以靈活而富有彈性，適應(yīng)響應(yīng)式設(shè)計的需求，同時兼顧后臺維護。因此前期的站點規(guī)劃非常重要，需要協(xié)調(diào)和兼顧外在和內(nèi)在、前端和后臺的需求。在華東師范大學(xué)新版主頁規(guī)劃中，刪除了原有網(wǎng)站多余的元素，對頁面內(nèi)容模塊和功能模塊進行了確定，最終將頁面元素歸納為頭部導(dǎo)航區(qū)、內(nèi)容區(qū)、功能區(qū)、頁腳導(dǎo)航區(qū)四個主要部分。其中，頭部導(dǎo)航區(qū)包括身份頁面導(dǎo)航、語言導(dǎo)航、LOGO、搜索條、主菜單等；內(nèi)容區(qū)包括大圖展示、新聞快遞、媒體視點、講座報告等；功能區(qū)包括郵箱登錄框、常用鏈接等；頁腳導(dǎo)航區(qū)則為簡單的文字和圖片組合。

2.美術(shù)設(shè)計

響應(yīng)式設(shè)計的原則通常是優(yōu)先滿足移動設(shè)備，并在此基礎(chǔ)上確定網(wǎng)頁在電腦等較大屏幕的顯示，這導(dǎo)致設(shè)計稿常常更傾向于移動端，弱化了非移動端用戶的視覺體驗。由于高校主頁的訪問環(huán)境目前仍主要為非移動設(shè)備，其形象塑造主要基于電腦版本，在移動設(shè)備上的顯示優(yōu)化更多來源于實用性考慮。因此，在華東師范大學(xué)新版主頁的設(shè)計過程中采用了電腦版本優(yōu)先，兼顧移動設(shè)備的理念。最終的設(shè)計簡稿如圖1、圖2所示。

圖1 華東師大門戶網(wǎng)站電腦版設(shè)計簡稿

圖2 華東師大門戶網(wǎng)站移動版設(shè)計簡稿

3.構(gòu)建HTML結(jié)構(gòu)

美術(shù)設(shè)計稿確認后，下一步將使用HTML5構(gòu)建相應(yīng)的DOM結(jié)構(gòu)。由于頁面各個內(nèi)容區(qū)塊在前期規(guī)劃中有了清晰的劃分，因此可以按一一對應(yīng)的關(guān)系確定HTML的層級結(jié)構(gòu)。在編寫代碼時，盡量使用HTML5的語義化標簽，以便于代碼的閱讀。門戶首頁的結(jié)構(gòu)大致如下：

使用HTML5的問題在于，低版本的IE并不支持HTML5，新的標簽元素不能被這些瀏覽器識別。為了確保所有瀏覽者都能夠正常使用網(wǎng)站，需要使用JavaScript來使低版本IE支持HTML5標簽。其中，html5shiv是一種比較好的解決方案。[5]

4.編寫 Media Queries

在CSS3的Media Queries中，可以對同一元素編寫多套樣式，但多套樣式的編寫通常并非同時進行，而是首先制作通用版本的樣式，再在該樣式基礎(chǔ)上擴展其他媒體特性下的樣式。華東師范大學(xué)門戶網(wǎng)站的通用CSS版本針對1024*768以上的電腦制作。由于考慮到后臺內(nèi)容維護的方便，沒有在該版本中采取百分比定位，而是采用固定定位的方式。如大圖展示模塊中，使用了980×386像素的圖片做多圖切換效果，內(nèi)容維護人員能夠較容易根據(jù)這個固定尺寸準備相應(yīng)圖片，而如果為百分比定位，圖片將被顯示為100%寬度，內(nèi)容維護人員需要考慮在較大屏幕下的圖片顯示效果，準備圖片素材的難度將因此增加。

在通用CSS版本基礎(chǔ)上，創(chuàng)建較小的分辨率的Media Queries，將頁面各種元素重寫為百分比定位，并根據(jù)設(shè)計稿對位置、大小和外觀進行調(diào)整。最終確定的Media Queries的規(guī)則種類如下：

@media screen and(max-width:980px){/*屏幕寬度小于內(nèi)容主題寬度時的樣式*/}

@media screen and(orientation:portrait){/*iPad等移動設(shè)備縱向時的樣式*/}

以上的Media Queries種類雖然不多，但是已經(jīng)能夠基本針對iPad、iPhone和主流安卓手機進行響應(yīng)。在今后可以進一步細化，如為屏幕寬度在480px、320px、240px等范圍區(qū)間的設(shè)備設(shè)置更細化的響應(yīng)樣式。

Media Queries另一個問題是雖然從外在進行了響應(yīng)，但移動設(shè)備加載的內(nèi)容和電腦版本是相同的，特別是需要在手機中加載數(shù)張980×386像素的滾動大圖，非常耗費流量。目前的解決方法是使用Filament Group的Responsive-Images，通過JavaScript檢測當前設(shè)備的屏幕分辨率，并據(jù)此選擇合適尺寸的圖片進行下載。[6]

5.前端優(yōu)化及前后臺結(jié)合

要實現(xiàn)人性化的響應(yīng)式設(shè)計，網(wǎng)站還需要進行細致的前端優(yōu)化。例如，華東師大主頁中主菜單條目較多，在手機屏幕上顯示時將占據(jù)較大區(qū)域，致使用戶第一時間無法瀏覽到網(wǎng)站的主要內(nèi)容。從網(wǎng)站的易用性來說，更佳的使用方式是在較小屏幕設(shè)備中隱藏主菜單，并提供菜單切換按鈕，供瀏覽者控制菜單的展開和隱藏顯示。具體的解決步驟是，在主頁中嵌入一個空白Div，并為其賦予id，以便通過jQuery為其設(shè)置各種事件。在CSS的通用樣式中設(shè)置該Div為不顯示。在移動設(shè)備樣式中，將Div顯示為按鈕現(xiàn)狀，并使用jQuery為其添加點擊事件，點擊該Div將觸發(fā)菜單的展開、折疊切換效果。通過以上途徑，使手機用戶在直觀閱覽網(wǎng)站內(nèi)容的同時，能夠方便地對主菜單進行操作。

經(jīng)過優(yōu)化后的前端頁面已經(jīng)初具雛形，但頁面中的內(nèi)容還是靜態(tài)的，需要將網(wǎng)站的前后臺進行結(jié)合，使前端頁面能夠動態(tài)顯示來自后臺數(shù)據(jù)庫的信息。華東師范大學(xué)主頁使用了網(wǎng)站群系統(tǒng)作為網(wǎng)站后臺。首先，在網(wǎng)站群中為主頁開設(shè)站點，將之前制作好的前端文件，包括HTML文件、CSS文件、JavaScript文件、圖像文件和其他資源文件等進行打包，上傳至后臺并設(shè)置為默認站點模板。其次，在網(wǎng)站群后臺中進行欄目和頻道的綁定，在模板中配置頻道的輸出類型，使數(shù)據(jù)能夠?qū)?yīng)顯示到相應(yīng)的頁面位置。最后，將站點進行靜態(tài)發(fā)布，生成所有靜態(tài)頁面。

6.調(diào)試

響應(yīng)式設(shè)計網(wǎng)站不僅需要兼容Chrome、Firefox等主流瀏覽器，同時要兼容低版本IE，更需要兼容多種移動設(shè)備，否則“響應(yīng)式設(shè)計”本身便無從談起。這意味著響應(yīng)式設(shè)計網(wǎng)站的調(diào)試是一件值得重視且需要投入大量精力的工作，僅靠簡單的測試難以發(fā)現(xiàn)設(shè)計中可能存在的問題。一般來說，需要準備Chrome、Firefox、IE6、IE7、IE9、Safari等數(shù)種瀏覽器，同時至少需要準備一臺iPad設(shè)備。由于在iPad上可以安裝iPhone的瀏覽器app，所以iPhone上的調(diào)試可以在iPad中同時進行。如果測試設(shè)備的種類越多，調(diào)試和站點優(yōu)化的效果也會越好。

在有限的條件下，也可以使用Firefox中面向Web開發(fā)者的“自適應(yīng)設(shè)計視圖”工具。該工具可以模擬各種分辨率下的手持設(shè)備，并在設(shè)備的橫向和縱向之間進行切換。但其調(diào)試效果可能會與移動設(shè)備上的呈現(xiàn)有所出入。

四、總結(jié)和展望

經(jīng)過約4個月的設(shè)計開發(fā)，華東師范大學(xué)最終于2013年元旦正式推出新版網(wǎng)站，如圖3所示。使用響應(yīng)式設(shè)計開發(fā)新版網(wǎng)站令人耳目一新，使師生在手機、平板電腦上查閱學(xué)校新聞、通知公告、講座報告等信息時有了更好的使用體驗。比起傳統(tǒng)的移動版網(wǎng)站，響應(yīng)式設(shè)計體現(xiàn)了較低的成本、較快的開發(fā)速度和較強的可拓展性。可以預(yù)料在不遠的未來，將有更多國內(nèi)高校門戶網(wǎng)站使用響應(yīng)式設(shè)計。同時，響應(yīng)式設(shè)計也必將成為高校構(gòu)建新型門戶網(wǎng)站的關(guān)鍵技術(shù)。

圖3 華東師大門戶網(wǎng)站運行效果

[1]http://www.alistapart.com/articles/responsive-webdesign/

[2]http://code.google.com/p/css3-mediaqueries-js/

[3]http://twitter.github.com/bootstrap/

[4]http://foundation.zurb.com

[5]http://code.google.com/p/html5shiv/

[6]https://github.com/filamentgroup/Responsive-Images