簡單說呢就針對不同的螢幕解析度應用不同的css樣式。比如在電腦、pad裝置上，螢幕比較寬，就可以一行放2個div。
到了手機上，或者pad豎著拿的的時候，一行就只放1個div。
這裡有2個關鍵點：
一是如何在不修改dom結構的前提下調整布局。
二是如何判斷螢幕解析度並應用對應的css。
以上兩點都應該不依賴與js。
實現第一點依靠的是流式布局。就是所有參與布局的div都用float:left，寬度都用百分比表示。比如下圖，黃色部分的寬度是60%，橘色寬度是40%。
如果將黃色和橘色的寬度都width=100%,那麼從1行變成2行了，如下圖。從而實現不修改dom實現布局變化。
那麼如何不使用js而實現動態調整css樣式就是第二個關鍵點。
html5中提供了一種新的css語法——@media，學名是media query，可以為不同的解析度設定不同的樣式。 1
2
3
4
5
6
7
8
/* phone portrait (320px) */
@media onlyscreenand (max-width:320px)
#main
#foot
#left
#right
}
上面這段**的含義就是當螢幕寬度小於等於320畫素時應用大括號中的樣式。下圖是在css生效時在瀏覽器中的效果：
@media還有一些更複雜的用法，比如： 1
2
/* phone landscape (480px) */
@media onlyscreenand (min-width:321px) and (max-width:480px) and (orientation:landscape) {
這段語句就是針對iphone橫屏的。即，瀏覽器寬度在321-480畫素之間，且方向是「橫向」時生效。
不過自從retina這中妖豔的螢幕推出，解析度已經不能代表世界的真相了。小小的note3的解析度比一些17「顯示的解析度還高。
所以還有必要判斷一下裝置的畫素密度-device-pixel-ratio。 1
@media onlyscreenand (-moz-min-device-pixel-ratio:2), onlyscreenand (-o-min-device-pixel-ratio:2/1), onlyscreenand (-webkit-min-device-pixel-ratio:2), onlyscreenand (min-device-pixel-ratio:2)
比如上面的語句就是判斷終端的畫素比是2的話，所渲染的樣式。可以適用於iphone4，iphone5等裝置。
除了上述兩點，還需要在頁面上增加乙個viewport的meta標籤，否則在手機上可能會有頁面自動縮放的情況。例如： 1
<metaname="viewport"content="width=device-width; initial-scale=1.0">
總結一下：響應式布局有三個關鍵點：
1、流式布局 liquid layout
2、media query
3、viewport
具體細節就請大家自己研究相關的語法了。
響應式布局簡說
簡單說呢就針對不同的螢幕解析度應用不同的css樣式。比如在電腦 pad裝置上，螢幕比較寬，就可以一行放2個div。到了手機上，或者pad豎著拿的的時候，一行就只放1個div。這裡有2個關鍵點 一是如何在不修改dom結構的前提下調整布局。二是如何判斷螢幕解析度並應用對應的css。以上兩點都應該不依賴與...
響應式布局簡說
簡單說呢就針對不同的螢幕解析度應用不同的css樣式。比如在電腦 pad裝置上，螢幕比較寬，就可以一行放2個div。到了手機上，或者pad豎著拿的的時候，一行就只放1個div。這裡有2個關鍵點 一是如何在不修改dom結構的前提下調整布局。二是如何判斷螢幕解析度並應用對應的css。以上兩點都應該不依賴與...
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...