一個(gè)簡(jiǎn)單的實(shí)例（類(lèi)似一淘網(wǎng)etao.com）趣斤，版面包含頭部、尾部杏节，中間分為3個(gè)部分唬渗。隨著寬度的縮小，一次隱藏中間right的部分奋渔，再縮小把right放在中間部分的下面镊逝。
包含2個(gè)文件：index.html 和 style.css
index.html：
index.html.png
style.css：
/* 初始化---begin */
*{
margin: 0px;
padding: 0px;
}
.heading,
.container,
.footing{
margin: 10px auto;// 上下10px，左右自適應(yīng)
}
.heading{
height: 100px;
background-color: chocolate;
}
.left,
.right,
.main{
background-color: cornflowerblue;
}
.footing{
height: 100px;
background-color: blue;
}
/* 初始化---end */
/* 自適應(yīng)---begin */
/*屏幕寬度大于960*/
@media screen and (min-width: 960px){
.heading,
.container,
.footing{
width: 960px;
}
.left,
.main,
.right{
float: left;
height: 500px;
}
.left,
.right{
width: 200px;
}
.main{
margin: 1px 5px;
width: 550px;
}
.container{
height: 500px;
}
}
/*屏幕寬度大于600小于960*/
@media screen and (min-width: 600px) and (max-width:960px) {
.heading,
.container,
.footing{
width: 600px;
}
.left,
.main{
float: left;
height: 400px;
}
.right{
display: none;
}
.left{
width: 160px;
}
.main{
width: 435px;
margin-left: 5px;
}
.container{
height: 400px;
}
}
/*屏幕寬度小于600*/
@media screen and (max-width:600px) {
.heading,
.container,
.footing{
width: 400px;
}
.left,
.right{
width: 400px;
height: 100px;
}
.main{
margin-top: 10px;
width: 400px;
height: 200px;
}
.right{
margin-top: 10px;
}
.container{
height: 420px;
}
}
/* 自適應(yīng)---end */