熊瑞英 王寧

摘 要：隨著移動(dòng)網(wǎng)絡(luò)的崛起，用戶使用終端設(shè)備（手機(jī)、平板）聯(lián)網(wǎng)已成為一種趨勢(shì)，這就要求網(wǎng)頁(yè)能夠自動(dòng)切換分辨率、改變圖片尺寸及相關(guān)腳本功能等，來(lái)適應(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屬性。通過(guò)這些技術(shù)使網(wǎng)站能夠動(dòng)態(tài)地適應(yīng)各類用戶終端設(shè)備，從而滿足各類用戶的需求。

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

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

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

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

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

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

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

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

由于移動(dòng)設(shè)備的多樣性和用戶操作的隨意性，就要求頁(yè)面具有很好的適應(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)頁(yè)對(duì)多種設(shè)備的兼容，下面我將介紹實(shí)現(xiàn)響應(yīng)式Web設(shè)計(jì)的四大關(guān)鍵技術(shù)：彈性布局、彈性圖片、媒體查詢（Media Queries）和viewport 屬性。

2.1 彈性布局

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

2.1.1 百分比布局

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

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

2.1.2 浮動(dòng)屬性

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

2.2 彈性圖片

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

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

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

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

2.3 媒體查詢

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

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í)頁(yè)面背景顏色為綠色；當(dāng)視口寬度在480px和768px之間（平板屏幕）時(shí)頁(yè)面背景顏色為黃色；當(dāng)視口寬度大于等于769px（PC屏幕）時(shí)頁(yè)面背景顏色為藍(lán)色。

2.4 viewport 屬性

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

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

3 結(jié)語(yǔ)

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

參考文獻(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)頁(yè)模板的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)與現(xiàn)代化，2013（6）：125-127.

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

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