在工作当中，我们难免会遇到这样的适应屏幕需求，宽版以1200px为基准，窄版以1024为基准，版心应该怎么设置呢？而合理运用媒体查询就能非常容易帮我们解决这个问题。

/*版心*/
@media screen and (max-width:1200px) and (min-width:1024px){
    .w{
        width:1024px;
        margin:0 auto;
        position: relative;
    }
}
@media screen and (max-width:1024px){
    .w{
        width:960px;
        margin:0 auto;
        position: relative;
    }
}
@media screen and (min-width:1200px){
    .w{
        width:1200px;
        margin:0 auto;
        position: relative;
    }
}