趙晴

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

關鍵詞：響應式Web；網頁設計；HTML5；CSS

1 概述

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

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

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

2.1 適應不同屏幕

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

2.2 橫屏自動切換

用移動設備訪問網頁，當屏幕由橫屏切換到豎屏（或者相反）時，響應式Web頁面能夠自動切換不同的網頁布局，以適應頁面的不同寬度，實現最佳的布局效果。

2.3 減少維護成本

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

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

3 響應式Web設計的關鍵技術

響應式Web設計的關鍵技術包括有媒體查詢、彈性布局和響應式圖片。

3.1 媒體查詢

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

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

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

h1 { color： green }

}

把上面的語句包含在網頁的CSS樣式表中就可以實現以上效果，也可以在html中嵌入媒體查詢語句，或者應用@import有條件地加載其他樣式表。

3.2 彈性布局

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

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

百分比尺寸=目標元素尺寸÷上下文元素尺寸

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

3.3 響應式圖片

在CSS中聲明：

img { max-width： 100%； }

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

以上只是實現了彈性圖片響應，但是它并不是響應式圖片設計。我們應該為不同的屏幕尺寸提供不同分辨率的圖片。

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

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

4 結束語

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

參考文獻

[1]鐘遠薪.響應式Web設計：圖書館移動服務新方向[J].圖書館論壇，2015（7）.

[2]劉歡，盧蓓蓉.使用響應式設計構建高校新型門戶網站[J].中國教育信息化，2013（9）.

[3]蔣凌燕，查英華.基于HTML5的響應式Web頁面重組適配技術研究[J].計算機與現代化，2015（2）.