響應式Web設計

熊瑞英 王寧

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

關鍵詞：響應式 Web 設計 CSS3 彈性布局 彈性圖片 媒體查詢 視口

中圖分類號：TP393 文獻標識碼：A 文章編號：1674-098X（2015）09（b）-0064-02

隨著近幾年移動網絡的快速崛起，人們不在一味的選擇電腦上網，為圖方便，人們更傾向用手機、平板等終端基于各種移動網絡進行聯網。據中國互聯網絡信息中心CNNIC在2014年6月的統計，移動互聯網用戶規模已超過PC互聯網用戶規模。可見中國互聯網正在朝移動方向發展，移動設備正在趕超PC設備，成為互聯網的主要設備，但移動設備多元化，在這樣的客觀背景下，我們不得不解決：如何才能在不同的設備上呈現給用戶同樣的Web網頁呢？

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

1 響應式Web設計的概念

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

既然不能為每種移動設備創建獨立的網頁，那么就讓我們的網頁來適應各種設備。在此思路下，Web設計師順勢而為，針對上網設備的多樣性，設計能自適應用戶終端設備的網站。讓網頁根據用戶行為以及設備環境（系統平臺、屏幕尺寸、屏幕定向等）進行相應的響應和調整，這就是響應式web設計。說的簡單一點，就是為了省時省力省錢，一次性開發出來的網頁，用同一個URL，能夠根據不同終端設備，響應用戶的操作自動調整網頁尺寸。

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

由于移動設備的多樣性和用戶操作的隨意性，就要求頁面具有很好的適應性，其布局結構要做到根據不同的設備規格、屏幕分辨率和用戶操作進行響應調整。響應式Web設計是采用HTML5+CSS3技術實現一個網頁對多種設備的兼容，下面我將介紹實現響應式Web設計的四大關鍵技術：彈性布局、彈性圖片、媒體查詢（Media Queries）和viewport 屬性。

2.1 彈性布局

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

2.1.1 百分比布局

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

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

2.1.2 浮動屬性

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

2.2 彈性圖片

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

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

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

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

2.3 媒體查詢

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

2.3.1 link標簽

link標簽是指在 CSS 3中根據條件加載不同的CSS 文件。例如，代碼：

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

2.3.2 @media 規則

@media規則是指在 CSS 3中根據條件加載不同的 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； } }

該代碼的功能是當視口寬度小于等于479px（手機屏幕）時頁面背景顏色為綠色；當視口寬度在480px和768px之間（平板屏幕）時頁面背景顏色為黃色；當視口寬度大于等于769px（PC屏幕）時頁面背景顏色為藍色。

2.4 viewport 屬性

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

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

3 結語

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

參考文獻

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

[2] （美）卡德萊茨.響應式Web設計實踐[M].侯鴻儒，譯.北京：人民郵電出版社，2013.

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

[4] 張樹明.基于響應式Web設計網頁模板的設計與實現[J].計算機與現代化，2013（6）：125-127.

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

[6] 我國手機網民規模達5.27億使用率首次超越PC[EB/OL].http：//tech.qq.com/a/20140721/043716.htm.