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

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

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

通過link標(biāo)簽：

?

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

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

CSS中直接設(shè)置：

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

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

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

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

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

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

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

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

正常我們需要響應(yīng)式Web設(shè)計的頁面，在頁面中都要加上viewport的設(shè)置：

<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（設(shè)備寬度）。但是這個么設(shè)置有一個弊端，因為這個設(shè)置只有在豎屏狀態(tài)下有效，橫屏狀態(tài)下，返回的卻還是和豎屏狀態(tài)下一樣的寬度。

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

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

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

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

target-densitydpi=device-dpi：分辨率的設(shè)置，通?？梢匀≈担篸evice-dpi（使用設(shè)備自身的dpi作為目標(biāo) dp，不發(fā)生縮放）、high-dpi（使用高分辨率，中低分辨率場景下會相應(yīng)縮?。edium-dpi（使用中等分辨率，高低分辨率分別進(jìn)行相應(yīng)的 放大和縮小，缺省值）、low-dpi（使用低等分辨率，中高分辨率相應(yīng)放大）。

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

允許網(wǎng)頁寬度自動調(diào)整：

就是在網(wǎng)頁的中追加viewport meta的定義。

選取一個標(biāo)準(zhǔn)開發(fā)出具體頁面：

比如一個頁面被要求對屏幕寬度為320px、480px、640px的三種場景下進(jìn)行響應(yīng)式設(shè)計，這個時候正常會選取320px下的標(biāo)準(zhǔn)先進(jìn)行頁面開發(fā)。

抽取最低標(biāo)準(zhǔn)下的CSS樣式獨立成外鏈樣式文件：

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

根據(jù)UEDMMs的視覺稿進(jìn)行其他標(biāo)準(zhǔn)的CSS樣式文件開發(fā)。

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

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

為什么現(xiàn)在這么很多網(wǎng)站都選擇響應(yīng)式Web設(shè)計呢？主要優(yōu)勢個人感覺有以下幾個方面：

給用戶更好的視覺呈現(xiàn)：

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

降低開發(fā)的成本：

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

入口只有一個：

不管你用什么終端訪問網(wǎng)頁，URL都是一個。

更多信息請查看IT技術(shù)專欄