网页多种版心适应多屏幕技巧

最新推荐文章于 2024-09-03 19:39:37 发布

小太阳sunshine

最新推荐文章于 2024-09-03 19:39:37 发布

阅读量9k

点赞数 3

分类专栏：前端技巧 css 文章标签：多版心-多屏幕适配

本文链接：https://blog.csdn.net/zfangls/article/details/54645209

版权

前端技巧同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

在工作当中，我们难免会遇到这样的适应屏幕需求，宽版以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;
    }
}