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

趙晴

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

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

1 概述

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

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

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

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

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

2.2 橫屏自動(dòng)切換

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

2.3 減少維護(hù)成本

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

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

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

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

3.1 媒體查詢(xún)

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

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

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

h1 { color： green }

}

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

3.2 彈性布局

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

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

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

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

3.3 響應(yīng)式圖片

在CSS中聲明：

img { max-width： 100%； }

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

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

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

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

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

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

參考文獻(xiàn)

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

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

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