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

陳飛旭

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

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

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

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

1 響應(yīng)式Web

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

1.1 媒體查詢(xún)

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

1.2 響應(yīng)式布局

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

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

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

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

1.3 彈性圖片

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

img { max-width： 100%；}

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

1.4 viewport屬性

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

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

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

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

2.1 網(wǎng)站布局

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

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

2.2 響應(yīng)式圖片

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

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

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

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

參考文獻(xiàn)

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

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

作者單位

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