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

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

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

1.流體網(wǎng)格

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

2.彈性圖片

彈性圖片指的是不給圖片設(shè)置固定尺寸，而是根據(jù)流體網(wǎng)格進(jìn)行縮放，用于適應(yīng)各種網(wǎng)格的尺寸。而實現(xiàn)方法是比較簡單，一句代碼就能搞定的事情。

img {max-width:100%;}

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

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

來看一個斷點解決圖片自適應(yīng)的例子。

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

對應(yīng)的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);
  }
}

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

3.媒體查詢

媒體查詢在CSS3中得到了強(qiáng)大的擴(kuò)展。使用這個屬性可以讓你的設(shè)計根據(jù)用戶終端設(shè)備適配對應(yīng)的樣式。這也是響應(yīng)式設(shè)計中最為關(guān)鍵的。可以說Responsive設(shè)計離開了Medial Queries就失去了他生存的意義。簡單的說媒體查詢可以根據(jù)設(shè)備的尺寸，查詢出適配的樣式。Responsive設(shè)計最關(guān)注的就是：根據(jù)用戶的使用設(shè)備的當(dāng)前寬度，你的Web頁面將加載一個備用的樣式，實現(xiàn)特定的頁面風(fēng)格。