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

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

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

通過(guò)link標(biāo)簽：

?

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

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

CSS中直接設(shè)置：

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

對(duì)于Media Queries的一些常用屬性，只對(duì)常用的幾個(gè)做一個(gè)簡(jiǎn)單列舉說(shuō)明，其他的屬性請(qǐng)各位自行查閱相關(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)整瀏覽器大小的時(shí)候，上面通過(guò)媒體查詢屬性的操作就可以完成響應(yīng)式Web設(shè)計(jì)的工作，但是這卻不能滿足移動(dòng)終端的瀏覽器，因?yàn)橐苿?dòng)瀏覽 器默認(rèn)頁(yè)面是為寬屏幕設(shè)計(jì)的，所以會(huì)把他縮小來(lái)適應(yīng)小屏幕，但是終端設(shè)備卻無(wú)法識(shí)別正確的寬度，所以光靠媒體查詢是解決不了移動(dòng)終端設(shè)備的響應(yīng)式Web設(shè) 計(jì)的。這個(gè)時(shí)候就必須使用viewport的meta標(biāo)簽來(lái)做一系列的設(shè)置，同樣，下面我只給出一個(gè)簡(jiǎn)單列舉說(shuō)明，有興趣的同學(xué)可以參考一些網(wǎng)上資料進(jìn)行 深入性的研究。

正常我們需要響應(yīng)式Web設(shè)計(jì)的頁(yè)面，在頁(yè)面中都要加上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è)備寬度）。但是這個(gè)么設(shè)置有一個(gè)弊端，因?yàn)檫@個(gè)設(shè)置只有在豎屏狀態(tài)下有效，橫屏狀態(tài)下，返回的卻還是和豎屏狀態(tài)下一樣的寬度。

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

maximum-scale=1.0：告訴瀏覽器阻止頁(yè)面放大，但是這樣一來(lái)也禁止了用戶手動(dòng)放大或縮小頁(yè)面，怎么說(shuō)呢，美好的東西也會(huì)存在缺陷吧。

minimum-scale=1.0：告訴瀏覽器阻止頁(yè)面縮小，同樣帶來(lái)上面的問(wèn)題。

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

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

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

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

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

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

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

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

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

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

通過(guò)Media Queries屬性設(shè)置來(lái)定義不同場(chǎng)景下加載不同的CSS樣式文件。

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

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

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

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

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

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

入口只有一個(gè)：

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

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