所謂響應式布局就是針對不同解析度的裝置，可以呈現出不同的布局效果。如乙個**在pc上呈現一種布局效果，在pad上呈現的是一種布局效果，而在手機上所呈現的又是另一種布局效果。這種不同分別率裝置上呈現不同效果的布局方式就是響應式布局。css3為響應式布局提供了良好的支援，下面通過乙個簡單的例子來簡單學習一下如何利用css3實現響應式布局。
css3通過media query（**查詢）物件來實現響應式布局的。通過media query物件可以獲取當前裝置的解析度，然後根據不同的解析度來設定不同的布局樣式。
使用css3響應式布局，首先要在html檔案中head內新增乙個，用來指明可視區域的寬度為裝置寬度，按比例進行縮放。
布局檔案
*
.heading,.footing
.container
/*當螢幕寬度大於等於960時,container的左區域，主區域，右區域按左中右樣式顯示*/
@media screen and (min-width: 960px)
.container
.left,.right
.main
}/*當螢幕寬度大於等於600px 小於960px時 隱藏right bar,調整各個部分的width*/
@media screen and (min-width: 600px) and (max-width: 960px)
.container
.left
.main
.right
}/*當螢幕寬度小於600px ,各部分豎直方向上依次顯示*/
@media screen and (max-width: 600px)
.container
.left,.right
.main
}
1.瀏覽器可視視窗大於960px
2.瀏覽器可視視窗大於600px小於960px
3.瀏覽器可視視窗小於600px時
以上是不同瀏覽器寬度時所顯示的效果。
響應式布局（一）
meta name viewport content width device width,initial scale 1,maximum scale 1,user scalable no user scalable no 屬性能夠解決 ipad 切換橫屏之後觸控才能回到具體尺寸的問題 假如乙個終端...
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...
響應式布局初始 一
響應式布局是為了實現網頁頁面適應各種裝置螢幕，如手機印表機等各個不同的終端。查詢模組 查詢 media queries 查詢主要包括兩個重要的內容 型別和 特性 型別 指定的值 型別描述 all所有的 裝置 screen 顯示器 手機 平板等裝置 print 印表機或者列印預覽檢視 speech 螢...