響應(yīng)式Web設(shè)計與實(shí)現(xiàn)

趙晴

摘 要：響應(yīng)式Web設(shè)計能夠適應(yīng)不同屏幕尺寸設(shè)備訪問Web頁面的需要，使Web頁面的布局和功能隨用戶的使用環(huán)境（包括屏幕尺寸、輸入方式、設(shè)備特點(diǎn)和瀏覽器功能）而變化。文章闡述了響應(yīng)式Web設(shè)計的感念及應(yīng)用前景，分析了響應(yīng)式Web設(shè)計應(yīng)用領(lǐng)域及其應(yīng)用上的優(yōu)勢，給出了響應(yīng)式Web設(shè)計的關(guān)鍵技術(shù)。

關(guān)鍵詞：響應(yīng)式Web；網(wǎng)頁設(shè)計；HTML5；CSS

1 概述

如今，手機(jī)、平板電腦等移動設(shè)備得到了廣泛應(yīng)用，而臺式機(jī)27英寸甚至30英寸的顯示器也很常見，這就使得上網(wǎng)設(shè)備屏幕之間的差距前所未有的巨大。因此，我們?yōu)g覽原有專門為臺式電腦準(zhǔn)備的Web頁面已經(jīng)不適合在小屏幕的移動設(shè)備和高分辨率大顯示器上使用了。

2010年，Ethan Marcotte應(yīng)用彈性網(wǎng)格布局、彈性圖片和媒體查詢這三種已有的技術(shù)，發(fā)明了“響應(yīng)式Web設(shè)計”，解決了這個問題。

2 響應(yīng)式Web設(shè)計的優(yōu)勢及需要避免的問題

2.1 適應(yīng)不同屏幕

根據(jù)不同設(shè)備的屏幕情況，響應(yīng)式Web能夠自動根據(jù)屏幕大小、分辨率對頁面內(nèi)容重新排版，使得網(wǎng)頁內(nèi)容更好地適應(yīng)設(shè)備，展現(xiàn)出完美的顯示效果。一般來說，頁面設(shè)計者會優(yōu)先使得重要內(nèi)容首先顯示出來，其他內(nèi)容根據(jù)某些規(guī)則依次排列，用戶可以通過滑動或滾動頁面進(jìn)行瀏覽。

2.2 橫屏自動切換

用移動設(shè)備訪問網(wǎng)頁，當(dāng)屏幕由橫屏切換到豎屏（或者相反）時，響應(yīng)式Web頁面能夠自動切換不同的網(wǎng)頁布局，以適應(yīng)頁面的不同寬度，實(shí)現(xiàn)最佳的布局效果。

2.3 減少維護(hù)成本

由于采用響應(yīng)式Web設(shè)計開發(fā)的頁面能夠適應(yīng)不同分辨率設(shè)備的顯示，使得我們只需要對同一個頁面進(jìn)行開發(fā)和維護(hù)，同時更新數(shù)據(jù)時也不會出現(xiàn)多個獨(dú)立平臺數(shù)據(jù)不一致的情況，減少了開發(fā)和維護(hù)的成本。

響應(yīng)式Web使我們設(shè)計一個適應(yīng)所有設(shè)備的頁面成為現(xiàn)實(shí)，但是它是基于HTML5和CSS3的技術(shù)，同時它并不需要依賴服務(wù)器或后端方案。其能否有效，只取決與我們使用的瀏覽器是非支持。也就是說，我們的瀏覽器必須支持以上兩種技術(shù)，才能完美地實(shí)現(xiàn)響應(yīng)式頁面。幸運(yùn)的是，如今移動設(shè)備的瀏覽器絕大部分都是支持HTML5和CSS3的，而桌面電腦的瀏覽器從IE9以上也是支持的。如果一定要保持網(wǎng)站的最大兼容性，只能做兩套頁面。通過javascript識別用戶瀏覽器的版本，采用不同的處理方式。

3 響應(yīng)式Web設(shè)計的關(guān)鍵技術(shù)

響應(yīng)式Web設(shè)計的關(guān)鍵技術(shù)包括有媒體查詢、彈性布局和響應(yīng)式圖片。

3.1 媒體查詢

在設(shè)計響應(yīng)式頁面的時候，利用媒體查詢得到設(shè)備的屏幕大小、屏幕寬高比和朝向（橫向還是豎向），采用不同的CSS3代碼改變內(nèi)容的顯示方式。

媒體查詢可以用到width（視口寬度）；height（視口高度）；device-width（設(shè)備屏幕寬度）；device-height（設(shè)備屏幕高度）；orientation（設(shè)備方向是水平還是垂直）；aspect-ratio（視口的寬高比）等特性。設(shè)計響應(yīng)式Web的時候，大多數(shù)情況下都是應(yīng)用width（視口寬度）來確定目標(biāo)設(shè)備屏幕的寬度，由此通過CSS樣式來改變頁面各個部分的顯示布局。以下語句會在屏幕寬度小于等于360像素的情況下把所有的h1元素變成綠色：

@media screen and （min-width：360px）{

h1 { color： green }

}

把上面的語句包含在網(wǎng)頁的CSS樣式表中就可以實(shí)現(xiàn)以上效果，也可以在html中嵌入媒體查詢語句，或者應(yīng)用@import有條件地加載其他樣式表。

3.2 彈性布局

網(wǎng)頁設(shè)計剛開始的時候，網(wǎng)站頁面的寬度大多以百分比的形式表示，這樣在窗口改變的時候，網(wǎng)頁的寬度也隨之變化，這就是彈性布局。大約十年前，網(wǎng)站設(shè)計人員流行“像素級精度設(shè)計”和固定頁面的寬度，以求在電腦瀏覽器上獲得完全一致的顯示效果。如今，為了適應(yīng)手機(jī)等小屏幕設(shè)備的顯示需要，我們要做響應(yīng)式設(shè)計，就需要重新應(yīng)用彈性布局創(chuàng)建網(wǎng)頁。

應(yīng)用彈性布局，需要將固定像素大小轉(zhuǎn)換成像素和視口的比例大小，應(yīng)用Ethan Marcotte給出的公式：

百分比尺寸=目標(biāo)元素尺寸÷上下文元素尺寸

也就是用目標(biāo)元素的尺寸占目標(biāo)所在容器的百分比。這個比例固定了之后，元素在其容器內(nèi)的相對位置也就固定了。

3.3 響應(yīng)式圖片

在CSS中聲明：

img { max-width： 100%； }

這樣就可以實(shí)現(xiàn)圖片隨著流動布局容器的變化而縮放，使圖片與其容器100%匹配。

以上只是實(shí)現(xiàn)了彈性圖片響應(yīng)，但是它并不是響應(yīng)式圖片設(shè)計。我們應(yīng)該為不同的屏幕尺寸提供不同分辨率的圖片。

那么問題來了？這樣算完成了圖片的響應(yīng)嗎？答案是否定的。彈性圖片并不等于響應(yīng)式圖片。我們應(yīng)該為不同的屏幕尺寸提供不同的圖片：不再是一張圖片滿足不同的設(shè)備，而是為大屏幕準(zhǔn)備大尺寸圖片，小屏幕準(zhǔn)備尺寸更小的清晰圖片。

我們應(yīng)用Embedded Content規(guī)范來進(jìn)行圖片分辨率的切換工作，具體來說，就是讓擁有高分辨率設(shè)備的用戶能夠看到高分辨率的清晰圖片，低分辨率設(shè)備用戶看到低分辨率的符合他們設(shè)備大小的圖片，即能夠根據(jù)視口的大小顯示完全不同的圖片，實(shí)現(xiàn)類似媒體查詢的功能。

4 結(jié)束語

Ethan Marcotte提出的響應(yīng)式設(shè)計代表了移動終端Web開發(fā)的發(fā)展趨勢，它是各種不同設(shè)備訪問互聯(lián)網(wǎng)的一種統(tǒng)一解決方案。通過適應(yīng)各個不同設(shè)備屏幕的大小，為現(xiàn)在乃至以后的設(shè)備都提供了最佳的訪問體驗。

參考文獻(xiàn)

[1]鐘遠(yuǎn)薪.響應(yīng)式Web設(shè)計：圖書館移動服務(wù)新方向[J].圖書館論壇，2015（7）.

[2]劉歡，盧蓓蓉.使用響應(yīng)式設(shè)計構(gòu)建高校新型門戶網(wǎng)站[J].中國教育信息化，2013（9）.

[3]蔣凌燕，查英華.基于HTML5的響應(yīng)式Web頁面重組適配技術(shù)研究[J].計算機(jī)與現(xiàn)代化，2015（2）.