上一篇 移動化用戶體驗設計 我們談了移動化用戶體驗，講述了如何在需求層面開始我們移動網頁的設計工作。
下面我們來討論技術的實現方式，第一種方法即響應式網頁設計。
什么是響應式網頁設計？
Responsive Web Design 是 Ethan Marcotte在去年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端，根據終端屏幕的大小亦或類型而調整顯示的布局與內容——而不是為每個終端做一個特定的版本。
下圖列舉了我們可能面對的不同的硬件設備類型、不同的操作系統、不同的屏幕分辨率：
應用響應式網頁設計，可以使我們不必針對具體設備或屏幕編寫單獨的網頁，不需另建單獨的網址，一個頁面適用於所有的設備，下圖是一個例子，同一個網頁在不同的設備中，我們看到不同的布局與內容的隱藏：
在PC中顯示的網頁：
到了屏幕小的移動設備上變成了這樣，只有頁面主題內容，不見了側條和廣告：
如何實現？
需要綜合運用三個方法步驟：
第一步，Media query - 即指定不同的 CSS 顯示風格
第二步，Fluid grid-即在 CSS 中使用百分比%而不是絕對值，如像素px來修飾頁面布局元素的尺寸如 Div。
第三步，Fluid images/media-同樣使用百分比%而不是絕對值，來修飾圖像、視頻、字體的顯示的使其能根據不同屏幕作出調整。
第一步首先要在頁面中添加：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
后面的initial-scale表示初始縮放，maximum-scale表示最大縮放比例，1意味着不能進行縮放。
下面有兩種方法讓瀏覽器根據屏幕大小來選擇不同的CSS樣式
方法1：
在 css 文件中加 @media 標簽，如
@media screen and (min-width:481px)
{
/* 寬度大於481時應用的樣式 */
......
}
@media screen and (max-width:480px)
{
/* 寬度小於於480時應用的樣式 */
......
}
其它共用的css屬性放在外邊。
方法2：
在頁面<head> 部分指定不同的 css。 如：
<head>
<title></title>
<link href="test1.css" rel="stylesheet" type="text/css" />
<link href="mobile.css" rel="stylesheet" media="screen and (max-width:768px)" type="text/css" />
</head>
當瀏覽器寬度小於768px時會使用mobile.css ，不然就用前一個。
說明
- screen 是媒體類型里的一種，CSS2.1定義了10種媒體類型
- and 被稱為關鍵字，其他關鍵字還包括 not(排除某種設備)，only(限定某種設備)
- (min-width: 400px) 就是媒體特性，其被放置在一對圓括號中。完整的W3C參考請看 http://www.w3.org/TR/css3-mediaqueries/#media1
第二步要注意百分比是相對於父容器來說的。
第三步，可以使用
img, object {
max-width: 100%;
}
這樣保證圖像和媒體的尺寸不會超出屏幕。
字體方面可以使用em，1em = 100%。
另外還有一種方法 flex box， CSS3 的新方法，以后加以介紹。
響應式網頁設計的優缺點
優點：
工作量相對單獨開發移動網站來說要小，不需要另外的域名，對於所有設備適用。
缺點：
占用帶寬，對於 CPU 和資源都緊張的移動設備來講，下載了許多不需要的圖片等資源，圖像沒有針對小屏幕優化。
針對響應式網頁設計的缺點，我們可以采用移動優先設計的方法和技術技巧來克服，下一篇會有介紹，同時帶大家認識一些設計工具。
本文版權歸原作者所有，轉載必須注明出處：http://www.cnblogs.com/h5rocks/， 否則保留追究法律責任的權利。