Responsive設計
什麽是響應式設計呢？
維基百科是這樣對響應式作的描述：“Responsive設計簡單的稱爲RWD，是精心提供各種設備都能瀏覽網頁的一種設計方法，RWD能讓你的網頁在不同的設備中展現不同的設計風格。”從這一點描述來說，RWD不是流體布局，也不是網格布局，而是一種獨特的網頁設計方法。
響應式設計要考慮元素布局的秩序，而且還需要做到“有求必應”，那就需要滿足以下三個條件：
網站必須建立靈活的網格基礎；
引用到網站的圖片必須是可伸縮的；
不同的顯示風格，需要在Media Queries上寫不同的樣式。
要想靈活的使用Responsive，僅滿足這幾個條件還是不夠的，我們必須對Responsive有一個全面的了解，那麽要了解Responsive，就得先了解他的一些術語：
流體網格
流體網格是一個簡單的網格系統，這種網格設計參考了流體設計中的網格系統，將每個網格格子使用百分比單位來控制網格大小。這種網格系統最大的好處是讓你的網格大小隨時根據屏幕尺寸大小做出相對應的比例縮放。
彈性圖片
彈性圖片指的是不給圖片設置固定尺寸，而是根據流體網格進行縮放，用於適應各種網格的尺寸。而實現方法是比較簡單，一句代碼就能搞定的事情。
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);
}
}請注意：這僅僅是解決響應式圖片自適應的一種思路，但這種方案僅僅適配的斷點較少。
並不太實用，此處僅爲擴展同學們的思路。
媒體查詢
媒體查詢在CSS3中得到了強大的擴展。使用這個屬性可以讓你的設計根據用戶終耑設備適配對應的樣式。這也是響應式設計中最爲關鍵的。可以說Responsive設計離開了Medial Queries就失去了他生存的意義。簡單的說媒體查詢可以根據設備的尺寸，查詢出適配的樣式。
Responsive設計最關注的就是：
根據用戶的使用設備的當前寬度，你的Web頁面將加載一個備用的樣式，實現特定的頁面風格。
屏幕分辨簡單點說就是用戶顯示器的分辨率，深一點說，屏幕分辨率指的是用戶使用的設備瀏覽您的Web頁面時的顯示屏幕的分辨率，比如說智能手機瀏覽器、移動電腦瀏覽器、平板電腦瀏覽器和桌面瀏覽器的分辨率。Responsive設計利用Media Queries屬性針對瀏覽器使用的分辨率來適配對應的CSS樣式。因此屏幕分辨率在Responsive設計中是一個很重要的東西，因爲只有知道Web頁面要在哪種分辨率下顯示何種效果，才能調用對應的樣式。
主要斷點
主要斷點，在Web開發中是一個新詞，但對於Responsive設計中是一個很重要的一部分。簡單的描述就是，設備寬度的臨界點。在Media Queries中，其中媒體特性“min-width”和“max-width”對應的屬性值就是響應式設計中的斷點值。簡單點說，就是使用主要斷點和次要斷點，創建媒體查詢的條件。而每個斷點會對應調用一個樣式文档（或者樣式代碼），如下圖所示：
上圖的style.css樣式文档運用在Web頁面中，但這個樣式文档包括了所有風格的樣式代碼，也就是說所有設備下顯示的風格都通過這個樣式文档下載下來。當然，在實際中還可以使用另一種方法，也就是在不同的斷點加載不同的樣式文档，如下圖所示。
上圖主要顯示的是主要斷點，主要斷點加載的不同樣式文档直接將影響Web的效果。除了主要斷點之外，爲了滿足更多效果時，還可以在這個基礎上添次要斷點。不過主要斷點和次要斷點增加之後，需要維護的樣式也相應的增加，成本也相對應的增加。因此在實際使用中，需要根據自身産品需求，決定斷點。
綜合下來，設置斷點應把握三個要點：滿足主要的斷點；有可能的話添加一些別的斷點；設置高於1024的桌面斷點。
