基于響應(yīng)式的大學(xué)生競賽服務(wù)網(wǎng)站的設(shè)計

陳飛旭

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

【關(guān)鍵詞】響應(yīng)式Web 媒體查詢 彈性圖片 viewport

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

我們在開發(fā)大學(xué)生競賽服務(wù)網(wǎng)站時也遇到了類似的問題，經(jīng)過認真的研究，最終利用響應(yīng)式Web設(shè)計技術(shù)解決了這一問題。本文將通過探討響應(yīng)式的Web設(shè)計方式，研究如何構(gòu)建一個網(wǎng)站，使之能夠自動適應(yīng)不同的網(wǎng)站訪問設(shè)備，通過動態(tài)調(diào)整網(wǎng)頁的布局結(jié)構(gòu)和顯示樣式，把相同的內(nèi)容以不同的格式呈現(xiàn)出來，做到“一源多屏”。

1 響應(yīng)式Web

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

1.1 媒體查詢

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

例如：

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

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

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

1.2 響應(yīng)式布局

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

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

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

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

1.3 彈性圖片

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

img { max-width： 100%；}

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

1.4 viewport屬性

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

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

2 基于響應(yīng)式的大學(xué)生競賽服務(wù)網(wǎng)站的設(shè)計步驟

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

2.1 網(wǎng)站布局

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

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

2.2 響應(yīng)式圖片

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

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

3 結(jié)束語

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

參考文獻

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

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

作者單位

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