所謂響應式佈局就是針對不同分辨率的設備，可以呈現出不同的佈局效果。如一個網站在PC上呈現一種佈局效果，在pad上呈現的是一種佈局效果，而在手機上所呈現的又是另一種佈局效果。這種不同分別率設備上呈現不同效果的佈局方式就是響應式佈局。CSS3爲響應式佈局提供了良好的支持，下面通過一個簡單的例子來簡單學習一下如何利用CSS3實現響應式佈局。
CSS3通過media query（媒體查詢）對象來實現響應式佈局的。通過media query對象可以獲取當前設備的分辨率，然後根據不同的分辨率來設置不同的佈局樣式。
使用CSS3響應式佈局，首先要在html文件中head內添加一個<meta name="viewport" content="width = device-width,initial-scale=1">，用來指明可視區域的寬度爲設備寬度，按比例進行縮放。
佈局文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>響應式佈局</title>
<link href="../static/CSS/response.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="heading"><h3>heading bar</h3></div>
<div class="container">
<div class="left"><h3>left bar</h3></div>
<div class="main"><h3>main content</h3></div>
<div class="right"><h3>right bar</h3></div>
</div>
<div class="footing"><h3>footing bar</h3></div>
</body>
</html>*{
margin: 0;
padding: 0;
text-align: center;
}
.heading,.footing{
background: aqua;
margin: 10px auto;
height: 80px;
}
.container{
margin: 10px auto;
}
/*當屏幕寬度大於等於960時,container的左區域，主區域，右區域按左中右樣式顯示*/
@media screen and (min-width: 960px){
.heading,.footing{
width: 960px;
}
.container{
width: 960px;
height: 400px;
}
.left,.right{
width: 180px;
height: 400px;
background: aqua;
float: left;
}
.main{
width: 590px;
height: 400px;
margin-right: 5px;
margin-left: 5px;
float: left;
background: aqua;
}
}
/*當屏幕寬度大於等於600px 小於960px時 隱藏right bar,調整各個部分的width*/
@media screen and (min-width: 600px) and (max-width: 960px){
.heading,.footing{
width: 600px;
}
.container{
width: 600px;
height: 400px;
}
.left{
width: 150px;
height: 400px;
float: left;
background: aqua;
}
.main{
width: 440px;
height: 400px;
margin-left: 10px;
float: left;
background: aqua;
}
.right{
display: none;
}
}
/*當屏幕寬度小於600px ,各部分豎直方向上依次顯示*/
@media screen and (max-width: 600px){
.heading,.footing{
width: 480px;
}
.container{
width: 480px;
}
.left,.right{
width: 480px;
height: 120px;
background: aqua;
}
.main{
width: 480px;
height: 400px;
margin-top: 10px;
margin-bottom: 10px;
background: aqua;
}
}1.瀏覽器可視窗口大於960px
2.瀏覽器可視窗口大於600px小於960px
3.瀏覽器可視窗口小於600px時
以上是不同瀏覽器寬度時所顯示的效果。