2014-10-23 藍藍設計的小編
 網(wǎng)上關于響應式設計的教程好復雜，我寫一個簡版的。 簡單說呢就針對不同的屏幕分辨率應用不同的CSS樣式。比如在電腦、Pad設備上，屏幕比較寬，就可以一行放2個Div。到了手機上，或者Pad豎著拿的的時候，一行就只放1個Div。 這里有2個關鍵點：
以上兩點都應該不依賴與JS。 實現(xiàn)第一點依靠的是流式布局。就是所有參與布局的DIV都用float:left，寬度都用百分比表示。比如下圖，黃色部分的寬度是60%，橘色寬度是40%。  如果將黃色和橘色的寬度都width=100%,那么從1行變成2行了，如下圖。從而實現(xiàn)不修改Dom實現(xiàn)布局變化。  那么如何不使用JS而實現(xiàn)動態(tài)調(diào)整CSS樣式就是第二個關鍵點。 HTML5中提供了一種新的CSS語法——@media，學名是Media Query，可以為不同的分辨率設定不同的樣式。 CSS
下圖是在CSS生效時在瀏覽器中的效果：  @media還有一些更復雜的用法，比如： CSS
不過自從Retina這中妖艷的屏幕推出，分辨率已經(jīng)不能代表世界的真相了。小小的Note3的分辨率比一些17“顯示的分辨率還高。 所以還有必要判斷一下設備的像素密度-device-pixel-ratio。 CSS
除了上述兩點，還需要在頁面上增加一個viewport的meta標簽，否則在手機上可能會有頁面自動縮放的情況。例如： HTML
總結一下：響應式布局有三個關鍵點：
具體細節(jié)就請大家自己研究相關的語法了。 Media Query的語法比較復雜，這里個大家推薦一個工具，可以方便的設計布局，并可以針對各種設備自動生成Media Query的語句： http://www.responsivewebcss.com/    |