@media screen and (max-device-width:1600px)失效

最新推荐文章于 2024-09-21 18:11:52 发布

原创最新推荐文章于 2024-09-21 18:11:52 发布 · 599 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

前端专栏收录该内容

2 篇文章

订阅专栏

本文探讨了CSS中媒体查询的顺序问题，特别是当多个@media规则应用于不同设备宽度时的表现。通过调整规则顺序解决了样式覆盖的问题。

@media screen and (max-device-width:1600px){
          img{max-width: 90%;height: 500px;}
          .swiper-slide>div{
            width: auto;
            height: 700px;
            font-size: 2ch;
            position: relative;
            bottom: 30px;
            margin:0px;
      }
    }

这段代码失效

原代码为

@media screen and (max-device-width:1600px){
          img{max-width: 90%;height: 500px;}
          .swiper-slide>div{
            width: auto;
            height: 700px;
            font-size: 2ch;
            position: relative;
            bottom: 30px;
            margin:0px;
      }
    }
    @media screen and (max-device-width:1920px){
      img{max-width: 1300px;height: 500px;}
      .swiper-slide>div{
        width: 1500px;
        height: 600px;
        font-size: 2ch;
        position: relative;
        bottom: 50px;
      }
    }

解决方法，将1920px的放到上面：

@media screen and (max-device-width:1920px){
      img{max-width: 1300px;height: 500px;}
      .swiper-slide>div{
        width: 1500px;
        height: 600px;
        font-size: 2ch;
        position: relative;
        bottom: 50px;
      }
    }
    @media screen and (max-device-width:1600px){
          img{max-width: 90%;height: 500px;}
          .swiper-slide>div{
            width: auto;
            height: 700px;
            font-size: 2ch;
            position: relative;
            bottom: 30px;
            margin:0px;
      }
    }