介紹完響應式Web的背景和概念之后，是時候該介紹具體的實現方法了，其實響應式Web設計的方法很簡單，就是利用CSS3的媒體查詢Media Queries和Viewport來解決問題的。

首先我們一起來看看Media Queries，這里我只會對其做一個簡單的列舉介紹。（有興趣深入的同學可以參考：http://www.w3.org/html/ig/zh/wiki/CSS3%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2）

通過媒體查詢的設置，我們可以根據屏幕寬度、屏幕方向等各個屬性來加載不同場景下不同的CSS文件來渲染頁面的視覺風格。具體的使用方法有以下兩種：

通過link標簽：

?

<link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="testcssbywidth1.css" />

示例代碼代表當當前屏幕寬度小于479px的時候，加載testcssbywidth1.css文件來渲染頁面。

CSS中直接設置：

@media screen and (max-width:479px) { /* 具體的CSS屬性設置 */ }

對于Media Queries的一些常用屬性，只對常用的幾個做一個簡單列舉說明，其他的屬性請各位自行查閱相關資料：

width：描述終端設備顯示區域的寬度，接受max/min的前綴；

height：描述終端設備顯示區域的高度，接受max/min的前綴；

device-width：描述終端設備屏幕的寬度，接受max/min的前綴；

device-height：描述終端設備屏幕的高度，接受max/min的前綴；

orientation：描述終端設備處于橫屏還是豎屏的狀態，取值分別為：landscape/portrait。

當我們調整瀏覽器大小的時候，上面通過媒體查詢屬性的操作就可以完成響應式Web設計的工作，但是這卻不能滿足移動終端的瀏覽器，因為移動瀏覽 器默認頁面是為寬屏幕設計的，所以會把他縮小來適應小屏幕，但是終端設備卻無法識別正確的寬度，所以光靠媒體查詢是解決不了移動終端設備的響應式Web設 計的。這個時候就必須使用viewport的meta標簽來做一系列的設置，同樣，下面我只給出一個簡單列舉說明，有興趣的同學可以參考一些網上資料進行 深入性的研究。

正常我們需要響應式Web設計的頁面，在頁面中都要加上viewport的設置：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi">

width=device-width：控制viewport的寬度，可以指定固定的值或者特殊的值，如device-width（設備寬度）。但是這個么設置有一個弊端，因為這個設置只有在豎屏狀態下有效，橫屏狀態下，返回的卻還是和豎屏狀態下一樣的寬度。

initial-scale=1.0：告訴瀏覽器初始化頁面時不要對頁面進行任何縮放的操作。

maximum-scale=1.0：告訴瀏覽器阻止頁面放大，但是這樣一來也禁止了用戶手動放大或縮小頁面，怎么說呢，美好的東西也會存在缺陷吧。

minimum-scale=1.0：告訴瀏覽器阻止頁面縮小，同樣帶來上面的問題。

user-scalable=no：告訴瀏覽器禁止頁面縮放。

target-densitydpi=device-dpi：分辨率的設置，通常可以取值：device-dpi（使用設備自身的dpi作為目標 dp，不發生縮放）、high-dpi（使用高分辨率，中低分辨率場景下會相應縮?。?、medium-dpi（使用中等分辨率，高低分辨率分別進行相應的 放大和縮小，缺省值）、low-dpi（使用低等分辨率，中高分辨率相應放大）。

通過對viewport的設置，利用Media Queries的屬性設置，你就可以做出響應式的Web頁面。下面開始一步一步告訴你響應式Web設計怎么開始的：

允許網頁寬度自動調整：

就是在網頁的中追加viewport meta的定義。

選取一個標準開發出具體頁面：

比如一個頁面被要求對屏幕寬度為320px、480px、640px的三種場景下進行響應式設計，這個時候正常會選取320px下的標準先進行頁面開發。

抽取最低標準下的CSS樣式獨立成外鏈樣式文件：

將320px下的CSS樣式全部抽取成外鏈樣式文件，響應式設計的頁面HTML代碼中，不要有任何CSS定義的代碼。

根據UEDMMs的視覺稿進行其他標準的CSS樣式文件開發。

通過Media Queries屬性設置來定義不同場景下加載不同的CSS樣式文件。

通過以上幾步之后，OK，你的第一個響應式Web設計的頁面就正式完成了，那么下面就要開始測試了，當然你可以很老實的用每一種終端設備來進行測試，當然這個是有必要的，但是為了馬上就能看到響應式設計的效果，我推薦一個工具（http://dfcb.github.io/Responsivator/）給你，試試吧，你會覺得很有快感的。

為什么現在這么很多網站都選擇響應式Web設計呢？主要優勢個人感覺有以下幾個方面：

給用戶更好的視覺呈現：

不同的屏幕下頁面的呈現方式不一樣，這樣可以給不同終端的用戶不同的視覺體驗。

降低開發的成本：

響應式Web設計相對于定制開發還是APP開發，無論是從開發資源投入、開發工時等各個方面都節省了不少，正所謂省時省力省錢，何樂而不為呢？

入口只有一個：

不管你用什么終端訪問網頁，URL都是一個。

更多信息請查看IT技術專欄