介紹完響應式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技術專欄
版權所有:易賢網
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試