依据分辨率区分手机、平板、pc

/*手机*/  
@media screen and (max-width:600px){  
   #header,#content,#footer{width:400px;}  
   .right,.center{margin-top:10px;}  
   .left,.right{height:100px;}  
   .center{height:200px;}  
}  
/*平板*/  
@media screen and (min-width:600px) and (max-width:960px){  
    #header,#content,#footer{width:600px;}  
.right{display:none;}  
.left,.center{height:400px;float:left;}  
.left{width:160px;margin-right:10px;}  
.center{width:430px;}  
}  
/*PC*/  
@media screen and (min-width:960px){  
    #header,#content,#footer{width:960px;}  
.left,.center,.right{height:400px;float:left;}  
.left{width:200px;margin-right:10px;}  
.center{width:540px;margin-right:10px;}  
.right{width:200px;}   
}  

 

posted @ 2018-10-30 10:43  justSmile2  阅读(463)  评论(0编辑  收藏  举报