簡單說呢就針對不同的螢幕解析度應用不同的css樣式。比如在電腦、pad裝置上，螢幕比較寬，就可以一行放2個div。到了手機上，或者pad豎著拿的的時候，一行就只放1個div。
這裡有2個關鍵點：
以上兩點都應該不依賴與js。
實現第一點依靠的是流式布局。就是所有參與布局的div都用float:left，寬度都用百分比表示。比如下圖，黃色部分的寬度是60%，橘色寬度是40%。
如果將黃色和橘色的寬度都width=100%,那麼從1行變成2行了，如下圖。從而實現不修改dom實現布局變化。
那麼如何不使用js而實現動態調整css樣式就是第二個關鍵點。
html5中提供了一種新的css語法——@media，學名是media query，可以為不同的解析度設定不同的樣式。
css/* phone portrait (320px) */
@media only screen and (max-width: 320px)
#main
#foot
#left
#right }
複製**
上面這段**的含義就是當螢幕寬度小於等於320畫素時應用大括號中的樣式。
下圖是在css生效時在瀏覽器中的效果：
@media還有一些更複雜的用法，比如：
css/* phone landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
複製**
這段語句就是針對iphone橫屏的。即，瀏覽器寬度在321-480畫素之間，且方向是「橫向」時生效。
不過自從retina這中妖豔的螢幕推出，解析度已經不能代表世界的真相了。小小的note3的解析度比一些17「顯示的解析度還高。
所以還有必要判斷一下裝置的畫素密度-device-pixel-ratio。
css@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)
複製**
比如上面的語句就是判斷終端的畫素比是2的話，所渲染的樣式。可以適用於iphone4，iphone5等裝置。
除了上述兩點，還需要在頁面上增加乙個viewport的meta標籤，否則在手機上可能會有頁面自動縮放的情況。例如：
html
複製**
總結一下：響應式布局有三個關鍵點：
具體細節就請大家自己研究相關的語法了。
media query的語法比較複雜，這裡個大家推薦乙個工具，可以方便的設計布局，並可以針對各種裝置自動生成media query的語句：
**：w3cfuns
響應式Web設計 布局
去年上半年，我開始著手推動專案中響應式設計的落 地。以官網優化需求為契機，主動去做了響應式的頁面設計，也說服了產品 設計和開發的www.cppcns.com相關同事一起把它上線落實，但不幸的是，由於各種方面的原因，比如，生搬硬套的pc模組，無差異化的設計使得移動端閱讀不佳，導航相容性有限等等原因，上...
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...
響應式布局
裝置高度 device width,device height 渲染視窗的寬高 width,height 裝置的手持方向 orientation 裝置的解析度 resolution 使用方法 用外聯或者內嵌樣式 或者兩者同時搭配使用。裝置高度 device width,device height 表...