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

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

通過媒體查詢的設(shè)置，我們可以根據(jù)屏幕寬度、屏幕方向等各個(gè)屬性來加載不同場景下不同的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的時(shí)候，加載testcssbywidth1.css文件來渲染頁面。

CSS中直接設(shè)置：

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

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

正常我們需要響應(yīng)式Web設(shè)計(jì)的頁面，在頁面中都要加上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：告訴瀏覽器初始化頁面時(shí)不要對頁面進(jìn)行任何縮放的操作。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

入口只有一個(gè)：

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

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