響應(yīng)式Web設(shè)計(jì)

熊瑞英 王寧

摘 要：隨著移動網(wǎng)絡(luò)的崛起，用戶使用終端設(shè)備（手機(jī)、平板）聯(lián)網(wǎng)已成為一種趨勢，這就要求網(wǎng)頁能夠自動切換分辨率、改變圖片尺寸及相關(guān)腳本功能等，來適應(yīng)不同設(shè)備——“響應(yīng)式 Web 設(shè)計(jì)”就應(yīng)運(yùn)而生。該論文介紹了響應(yīng)式 Web 設(shè)計(jì)的概念，并著重介紹實(shí)現(xiàn)響應(yīng)式 Web 設(shè)計(jì)的關(guān)鍵技術(shù)，包括：彈性布局、彈性圖片、媒體查詢（Media Queries）和viewport屬性。通過這些技術(shù)使網(wǎng)站能夠動態(tài)地適應(yīng)各類用戶終端設(shè)備，從而滿足各類用戶的需求。

關(guān)鍵詞：響應(yīng)式 Web 設(shè)計(jì) CSS3 彈性布局 彈性圖片 媒體查詢 視口

中圖分類號：TP393 文獻(xiàn)標(biāo)識碼：A 文章編號：1674-098X（2015）09（b）-0064-02

隨著近幾年移動網(wǎng)絡(luò)的快速崛起，人們不在一味的選擇電腦上網(wǎng)，為圖方便，人們更傾向用手機(jī)、平板等終端基于各種移動網(wǎng)絡(luò)進(jìn)行聯(lián)網(wǎng)。據(jù)中國互聯(lián)網(wǎng)絡(luò)信息中心CNNIC在2014年6月的統(tǒng)計(jì)，移動互聯(lián)網(wǎng)用戶規(guī)模已超過PC互聯(lián)網(wǎng)用戶規(guī)模?？梢娭袊ヂ?lián)網(wǎng)正在朝移動方向發(fā)展，移動設(shè)備正在趕超PC設(shè)備，成為互聯(lián)網(wǎng)的主要設(shè)備，但移動設(shè)備多元化，在這樣的客觀背景下，我們不得不解決：如何才能在不同的設(shè)備上呈現(xiàn)給用戶同樣的Web網(wǎng)頁呢？

針對市面上流行的不同屏幕尺寸規(guī)格的iPhone、iPad、三星以及其他一些智能手機(jī)、平板電腦，與此同時(shí)，用戶還可以改變屏幕窗口大小和轉(zhuǎn)動設(shè)備來切換屏幕的定向方式。怎樣做才能滿足不同用戶對這些設(shè)備的瀏覽需求？

1 響應(yīng)式Web設(shè)計(jì)的概念

當(dāng)前，大部分Web設(shè)計(jì)采用固定寬度的方式，為所有終端提供一致的用戶界面，在電腦屏幕中能友好顯示，而在移動終端的小屏幕中，頁面布局不能自適應(yīng)調(diào)整，無法按100%比例顯示頁面，出現(xiàn)水平滾動條，使用戶不便瀏覽。針對這一問題，我們可以根據(jù)用戶顯示屏設(shè)計(jì)多個(gè)版本的網(wǎng)頁，以供采用不同設(shè)備的用戶瀏覽，但會導(dǎo)致網(wǎng)站建設(shè)及維護(hù)的工作量成倍增長，費(fèi)用也會成倍增加。并且在未來的日子里，還會出現(xiàn)很多新的移動設(shè)備充斥市場。可見，為每種移動設(shè)備創(chuàng)建其獨(dú)立版本的網(wǎng)頁根本就是不切實(shí)際的。不過，有另外一種方式，可以讓我們避免這種情況的發(fā)生。

既然不能為每種移動設(shè)備創(chuàng)建獨(dú)立的網(wǎng)頁，那么就讓我們的網(wǎng)頁來適應(yīng)各種設(shè)備。在此思路下，Web設(shè)計(jì)師順勢而為，針對上網(wǎng)設(shè)備的多樣性，設(shè)計(jì)能自適應(yīng)用戶終端設(shè)備的網(wǎng)站。讓網(wǎng)頁根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺、屏幕尺寸、屏幕定向等）進(jìn)行相應(yīng)的響應(yīng)和調(diào)整，這就是響應(yīng)式web設(shè)計(jì)。說的簡單一點(diǎn)，就是為了省時(shí)省力省錢，一次性開發(fā)出來的網(wǎng)頁，用同一個(gè)URL，能夠根據(jù)不同終端設(shè)備，響應(yīng)用戶的操作自動調(diào)整網(wǎng)頁尺寸。

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

由于移動設(shè)備的多樣性和用戶操作的隨意性，就要求頁面具有很好的適應(yīng)性，其布局結(jié)構(gòu)要做到根據(jù)不同的設(shè)備規(guī)格、屏幕分辨率和用戶操作進(jìn)行響應(yīng)調(diào)整。響應(yīng)式Web設(shè)計(jì)是采用HTML5+CSS3技術(shù)實(shí)現(xiàn)一個(gè)網(wǎng)頁對多種設(shè)備的兼容，下面我將介紹實(shí)現(xiàn)響應(yīng)式Web設(shè)計(jì)的四大關(guān)鍵技術(shù)：彈性布局、彈性圖片、媒體查詢（Media Queries）和viewport 屬性。

2.1 彈性布局

固定尺寸的網(wǎng)頁不能滿足設(shè)備的多樣性，響應(yīng)式Web設(shè)計(jì)采用彈性布局來滿足不同設(shè)備的需求，即將固定尺寸設(shè)定為相對尺寸，其包括兩個(gè)主要手段：百分比布局和設(shè)置浮動屬性。

2.1.1 百分比布局

如果采用固定尺寸來制作網(wǎng)頁，當(dāng)用戶縮小窗口或采用較小的設(shè)備來瀏覽時(shí)，就會發(fā)現(xiàn)部分網(wǎng)頁內(nèi)容沒有顯示，用戶需要移動水平滾動條才能看全所有的內(nèi)容。因此需要采用比分比頁面寬度來實(shí)現(xiàn)彈性布局。

要實(shí)現(xiàn)網(wǎng)頁的彈性布局，就需要將固定尺寸（px）換為以“%”為單位的相對尺寸，這樣網(wǎng)頁便能適應(yīng)不同分辨率的設(shè)備了。Ethan Marcotte提出了轉(zhuǎn)換公式： 目標(biāo)元素寬度÷父級元素寬度=百分比寬度。例如，代碼div#sub_nav { width： 75%}，該代碼的功能是將寬度設(shè)置為父級元素寬度的75%。這樣無論顯示屏幕如何改變，寬度始終和其父級元素保持這個(gè)比例關(guān)系，從而保證了頁面響應(yīng)寬度的變化，同時(shí)不出現(xiàn)橫向滾動條。

2.1.2 浮動屬性

將網(wǎng)頁中各個(gè)區(qū)塊（div）的位置都是設(shè)置為浮動（float）的。這樣可以解決當(dāng)屏幕寬度不夠，一行放不下多個(gè)區(qū)塊的問題。例如將左內(nèi)容欄（div#left）和右內(nèi)容欄（div#right）分別設(shè)為250px，這樣會出現(xiàn)雙欄布局，針對縮小窗口后屏幕寬度不夠造成部分內(nèi)容會被隱藏的問題，可以通過代碼為左右內(nèi)容欄設(shè)置浮動屬性來解決： div#left，div#right { width：250px； float： left； } ，該代碼的功能是當(dāng)父級元素的寬度小于 500px 時(shí)，右內(nèi)容欄會因?yàn)榭臻g不夠而自動換行到左內(nèi)容欄的下面，形成單欄布局，而不會在水平方向溢出。

2.2 彈性圖片

圖片在網(wǎng)頁中一般按原始尺寸顯示，但當(dāng)顯示寬度小于圖片寬度時(shí)，圖片該如何友好地顯示呢？這時(shí)需要采用CSS3中的max-width屬性實(shí)現(xiàn)彈性圖片，讓圖片不失真地進(jìn)行縮放，友好的顯示出來。例如，代碼img{max-width：，100%}，該代碼的功能是使圖片與顯示窗口按 100%的比例自動縮放。確保圖片最大的寬度的同時(shí)不會超過顯示窗口的寬度，當(dāng)顯示窗口變窄時(shí)，圖片的最大寬度值也會相應(yīng)的減小，以使圖片本身永遠(yuǎn)不會被頁框邊緣隱藏。

彈性圖片使圖片能隨著顯示窗口自動縮放，解決了大圖片在手機(jī)等小屏幕設(shè)備上正常顯示的問題。但是大圖片還存在容量大的問題，采用移動終端聯(lián)網(wǎng)時(shí)，我們不得不考慮流量問題？

這時(shí)我們可以考慮在PC上使用分辨率較大的圖片，在移動終端上使用分辨率較少的圖片，這就需要用到響應(yīng)式圖片。例如，代碼：

該代碼的功能是首先使用 JavaScript 腳本檢測當(dāng)前顯示設(shè)備的屏幕分辨率，然后對檢測到的屏幕分辨率進(jìn)行判斷，分辨率超過800*600的設(shè)備會加載大圖片文件css1，否則加載小圖片文件css2。這就需要我們預(yù)先針對同一副圖片建立兩個(gè)不同分辨率的樣式文件。由此可見通過響應(yīng)式圖片可以實(shí)現(xiàn)根據(jù)屏幕尺寸調(diào)整圖片分辨率，達(dá)到在移動設(shè)備上既能訪問頁面而又能減少流量的目的。

2.3 媒體查詢

媒體查詢是響應(yīng)式web設(shè)計(jì)的核心，CSS3中的媒體查詢指的是根據(jù)設(shè)備環(huán)境（系統(tǒng)平臺、屏幕尺寸、屏幕定向等）加載不同的CSS文件來渲染頁面的視覺風(fēng)格。Web設(shè)計(jì)者只需要針對不同的屏幕分辨率等級來編寫不同的頁面布局樣式，然后上網(wǎng)設(shè)備會根據(jù)自身的屏幕分辨率來選擇一種適合頁面的布局。這樣就可以實(shí)現(xiàn)PC、平板、手機(jī)設(shè)備分別調(diào)用不同的CSS文件進(jìn)行網(wǎng)頁布局，從而實(shí)現(xiàn)完美的響應(yīng)式設(shè)計(jì)。實(shí)現(xiàn)媒體查詢可以通過link標(biāo)簽和@media 規(guī)則來實(shí)現(xiàn)。

2.3.1 link標(biāo)簽

link標(biāo)簽是指在 CSS 3中根據(jù)條件加載不同的CSS 文件。例如，代碼：

該代碼的功能是當(dāng)視口寬度小于等于479px（手機(jī)屏幕）時(shí)加載樣式文件479_screen.css進(jìn)行頁面布局；當(dāng)視口寬度大于等于769px（PC屏幕）時(shí)加載樣式文件769_screen.css進(jìn)行頁面布局。

2.3.2 @media 規(guī)則

@media規(guī)則是指在 CSS 3中根據(jù)條件加載不同的 CSS 選擇器.例如，代碼：

@media screen and （ max-width： 479px） { body { background： green； } }

@media screen and （min-width：480px）and（max-width： 768px）{body{background： yellow； }}

@media screen and （ min-width： 769px）{ body { background： blue； } }

該代碼的功能是當(dāng)視口寬度小于等于479px（手機(jī)屏幕）時(shí)頁面背景顏色為綠色；當(dāng)視口寬度在480px和768px之間（平板屏幕）時(shí)頁面背景顏色為黃色；當(dāng)視口寬度大于等于769px（PC屏幕）時(shí)頁面背景顏色為藍(lán)色。

2.4 viewport 屬性

當(dāng)用戶采用不同設(shè)備訪問網(wǎng)頁時(shí)，通過媒體查詢采用不同的頁面布局完成響應(yīng)式Web設(shè)計(jì)，但對移動終端的瀏覽器還存在一個(gè)問題，因?yàn)橐苿訛g覽器默認(rèn)頁面是為寬屏幕設(shè)計(jì)的，所以會把頁面縮小來適應(yīng)小屏幕，由此可見光靠媒體查詢是解決不了移動終端設(shè)備的響應(yīng)式Web設(shè)計(jì)的。這個(gè)時(shí)候就必須使用viewport的meta標(biāo)簽來做一系列的設(shè)置，從而獲取終端設(shè)備正確的寬度。例如，代碼：

該代碼的功能是是自定義視口，指定視口寬度（width）為設(shè)備寬度（device-width），初始縮放比例（initial-scale）為1，禁止頁面縮放（user-scalable），使用設(shè)備自身的分辨率（device-dpi）作為目標(biāo)分辨率（target-densitydpi）。

3 結(jié)語

響應(yīng)式Web設(shè)計(jì)通過彈性布局、彈性圖片、媒體查詢和viewport 屬性等技術(shù)，實(shí)現(xiàn)了同一網(wǎng)站兼容多種設(shè)備和屏幕，即“一源多屏”。讓網(wǎng)頁自適應(yīng)用戶終端設(shè)備，極大程度的滿足了各類移動終端用戶的需求。現(xiàn)在響應(yīng)式Web設(shè)計(jì)剛剛開始，它的路還很寬很長。

參考文獻(xiàn)

[1] Responsive Web Design， by ETHAN MARCOTTE ，May 25 2010， Published in CSS， Layout & Grids， Mobile/Multidevice， Responsive Design， Interaction Design.

[2] （美）卡德萊茨.響應(yīng)式Web設(shè)計(jì)實(shí)踐[M].侯鴻儒，譯.北京：人民郵電出版社，2013.

[3] （美）Alexis Goldstein.HTML5與 CSS3實(shí)戰(zhàn)指南[M].北京：人民郵電出版社，2011.

[4] 張樹明.基于響應(yīng)式Web設(shè)計(jì)網(wǎng)頁模板的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)與現(xiàn)代化，2013（6）：125-127.

[5] 李東博.HTML5+CSS3從入門到精通[M]. 北京：清華大學(xué)出版社，2013.

[6] 我國手機(jī)網(wǎng)民規(guī)模達(dá)5.27億使用率首次超越PC[EB/OL].http：//tech.qq.com/a/20140721/043716.htm.