一個(gè)簡(jiǎn)單的實(shí)例（類似一淘網(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 */