什么是響應式設計呢？維基百科是這樣對響應式作的描述：“Responsive設計簡單的稱為RWD，是精心提供各種設備都能瀏覽網頁的一種設計方法，RWD能讓你的網頁在不同的設備中展現不同的設計風格。”從這一點描述來說，RWD不是流體布局，也不是網格布局，而是一種獨特的網頁設計方法。

響應式設計要考慮元素布局的秩序，而且還需要做到“有求必應”，那就需要滿足以下三個條件：網站必須建立靈活的網格基礎；引用到網站的圖片必須是可伸縮的；不同的顯示風格，需要在Media Queries上寫不同的樣式。

要想靈活的使用Responsive，僅滿足這幾個條件還是不夠的，我們必須對Responsive有一個全面的了解，那么要了解Responsive，就得先了解他的一些術語：

1.流體網格

流體網格是一個簡單的網格系統，這種網格設計參考了流體設計中的網格系統，將每個網格格子使用百分比單位來控制網格大小。這種網格系統最大的好處是讓你的網格大小隨時根據屏幕尺寸大小做出相對應的比例縮放。

2.彈性圖片

彈性圖片指的是不給圖片設置固定尺寸，而是根據流體網格進行縮放，用于適應各種網格的尺寸。而實現方法是比較簡單，一句代碼就能搞定的事情。

img {max-width:100%;}

不幸的是，這句代碼在IE8瀏覽器存在一個嚴重的問題，讓你的圖片會失蹤。當然彈性圖片在響應式設計中如何更好的實現，到目前為止都還存在爭議，也還在不斷的改善之中。

為每一個斷點提供不同的圖片，這是一個比較頭痛的事情，因為Media Queries并不能改變圖片“src”的屬性值，那有沒有辦分法可以解決呢？可以參考一下下面的解決方法。使用background-image給元素使用背景圖片，顯示/隱藏父元素，給父元素使用不同的圖片，然后通過Media Queries來控制這些圖片顯示或隱藏。

來看一個斷點解決圖片自適應的例子。

<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="" />

對應的CSS代碼：

@media (min-device-width:600px){
img[data-src-600px]{
  content: attr(data-src-600px,url);
  }
}
@media (min-device-width:800px){
  img[data-src-800px] {
  content:attr(data-src-800px,url);
  }
}

 請注意：這僅僅是解決響應式圖片自適應的一種思路，但這種方案僅僅適配的斷點較少。并不太實用，此處僅為擴展同學們的思路。

3.媒體查詢

媒體查詢在CSS3中得到了強大的擴展。使用這個屬性可以讓你的設計根據用戶終端設備適配對應的樣式。這也是響應式設計中最為關鍵的?？梢哉fResponsive設計離開了Medial Queries就失去了他生存的意義。簡單的說媒體查詢可以根據設備的尺寸，查詢出適配的樣式。Responsive設計最關注的就是：根據用戶的使用設備的當前寬度，你的Web頁面將加載一個備用的樣式，實現特定的頁面風格。