響應式網頁設計概述
1. 定義
響應式網頁設計（RWD，Responsive Web Design）這個術語，由伊桑-馬科特（Ethan Marcotte）提出。他在A List Apart發表了一篇開創性的文章，將三種已有的開發技巧（彈性網格佈局、彈性圖片、媒體和媒體查詢）整合起來，並命名爲響應式網頁設計。這個術語還有一堆表示相同意思的其他叫法，如流式設計、彈性佈局、塑料佈局、流體設計、自適應佈局、跨設備設計以及彈性設計。
一言以蔽之，響應式網頁設計是針對不同的設備，對
同樣的網頁內容進行完美佈局的顯示機制。這裏要注意的一點是，電腦端和非電腦端設備上所呈現的內容或功能是不一樣的。這種情況不應該使用響應式網頁設計，而是需要老老實實的針對不同的設備進行前端開發。
2. 媒體查詢語法
- css 文件直接使用中：
@media screen and (max-width: 360px) {
// 具體樣式規則寫在這
}
- css 文件中加載其它樣式文件：
@import url('phone.css') screen and (max-width: 360px);
- link 標籤裏：
<link rel="stylesheet" type="text/css" href="phone.css" media="screen and (max-width: 360px)" />
媒體查詢能支持的特性列表可查看[ MDN 上的特性列表]。(https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries)
3. meta 標籤
使用 meta 標籤可以阻止移動端瀏覽器自動調整頁面大小。
<meta name="viewport" content="initial-scale = 1.0, width = device-width" />
4. 媒體查詢是實現響應設計的關鍵，但不是全部
僅使用媒體查詢來實現響應式頁面設計的話，實現的效果更像是“自適應式頁面設計”。那些僅使用媒體查詢來適應不同視口的固定寬度設計，只會從一組CSS媒體查詢規則突變到另一組，兩者之間沒有任何平滑漸變。
它的表現爲：當視口處於媒體查詢定義的斷點時，頁面能夠按照指定的樣式設置來顯示，這種情況比固定佈局好得多了，但還不是真正的響應式設計 – 視口在到達指定斷點（斷點是有限且明確的）前，頁面佈局都處於靜止的狀態，不能平滑靈活地過渡。
因此，在媒體查詢的基礎上，還需要使用流式佈局還替換掉固定佈局，實現視口斷點設置的佈局樣式之間的平滑過渡，也能對未來的設備視口變化有一定的應對能力。
5. 流式佈局（百分比佈局）
使用百分比佈局創建流動的彈性界面，同時使用媒體查詢來限制元素的變動範圍。
1. 修改元素固定像素寬度爲百分比寬度
在丹·錫德霍姆（Dan Cederholm）編寫的《無懈可擊的Web設計》 一書中，伊桑·馬科特爲其撰寫了一章關於流動佈局的內容。在書中，他提供了一個簡易可行的公式，將固定像素寬度轉換對應的百分比寬度：
目標元素寬度÷上下文元素寬度=百分比寬度
2. 修改字體的固定像素大小爲相對單位大小（em）
上面這個公式依舊適用，不過把主體由元素變爲了字體大小
目標字體大小÷上下文字體大小=百分比字體大小
瀏覽器默認的字體大小是 16px，所以，以下樣式規則的效果都是一樣的。
body {
font-size: 16px;
font-size: 100%;
font-size: 1em;
}
注意：使用 em 作爲字體單位時，字體大小是相對於父元素的字體大小的；而 line-height 行高是相對於元素自身的字體大小的。
3. 修改圖片爲彈性圖片（能隨着視口縮放而變換尺寸）
下面這樣就可以使圖片自動縮放到與其容器100%匹配。
img {
max-width: 100%; // 圖片自動縮放爲父容器的寬度
}
更進一步，可以將同樣的樣式應用到其他多媒體標籤上。
img,object,video,embed {
max-width: 100%;
}
給彈性圖片設置閾值：需要圖片既是響應式，又限定最大寬度，可以像下面這樣做：
img {
width: 45%; // 假設父容器的寬度爲 100px, 響應式百分比爲 45/100 = 45%
max-width: 45px; // 設置該圖片縮放能達到的最大尺寸爲 45px
}
TIPS
1. 重置樣式
重置樣式就是一組CSS聲明，用來覆蓋不同瀏覽器渲染HTML元素時的各種默認樣式。重置樣式一般會被加入到主樣式文件的開頭，用來將各個瀏覽器的自有默認樣式重置成統一表現，確保樣式表中後續追加的樣式在不同瀏覽器中有相同的顯示效果。針對HTML5文檔的通用的樣式文件 normalize.css 。