html - 媒体查询不起作用

Question

我想在我的网页中制作一个 slider 。我使用媒体查询图像大小。这是我的CSS代码

#myCarousel .item {
    height:400px;

}#slide1{
    background:url("bdpics/CoxBazar/new folder/coxE_4_md.jpg") top center no-repeat;
}
#slide2{
    background:url("bdpics/CoxBazar/new folder/cox_3_md.jpg") top center no-repeat;
}
#slide3{
    background:url("bdpics/CoxBazar/new folder/coxE_4-avrg.jpg") top center no-repeat;
}

/* -------------------Media queries--------------------------------*/
/* ----- portrait and landscape phone------------------------------------*/
@media(max-width: 480px){

    #myCarousel .item {
        height:270px;
        width:100%;
    }
    #slide1{
        background:url("../bdpics/CoxBazar/new folder/cox_3_sm.jpg") top center no-repeat;
        background-size:100% 100%;
        min-width: 100%;
        height: 675px;
    }
    #slide2{
        background:url("../bdpics/CoxBazar/new folder/coxE_4_sm.jpg") top center no-repeat;
        background-size:100%;
    }
    #slide3{
        background:url("../bdpics/CoxBazar/new folder/cox_24_sm.jpg") top center no-repeat;
        background-size:100%;
    }
}

/* ----- landscape phone and portrait tablet----------------------------*/
@media(max-width: 768px){

    #myCarousel .item {
        height:420px;
        width:100%;
    }
    #slide1{
        background:url("../bdpics/CoxBazar/new folder/cox_3_md.jpg") top center no-repeat;
        min-width: 100%;
        height:420px;

    }
    #slide2{
        background:url("../bdpics/CoxBazar/new folder/coxE_4_md.jpg") top center no-repeat;
        min-width: 100%;
        height:480px;
        background-size:100% 100%;
    }
    #slide3{
        background:url("../bdpics/CoxBazar/new folder/cox_24_md.jpg") top center no-repeat;
        min-width: 100%;
        height:480px;
        background-size:100% 100%;
    }
}


@media(max-width: 1200px){
    #myCarousel .item {
        height:580px;
        width:100%;
    }
    #slide1{
        background:url("../bdpics/CoxBazar/new folder/cox_3_lg.jpg") top center no-repeat;
        min-width: 100%;
        height:580px;
        background-size:100% 100%;
    }
    #slide2{
        background:url("../bdpics/CoxBazar/new folder/coxE_4_lg.jpg") top center no-repeat;
        min-width: 100%;
        height: 580px;
        background-size:100% 100%;
    }
    #slide3{
        background:url("../bdpics/CoxBazar/new folder/cox_24_lg.jpg") top center no-repeat;
        min-width: 100%;
        height: 580px;
        background-size:100% 100%;
    }

它运行良好 @media(max-width: 1200px)。但是屏幕宽度小于 768px 它正在加载大图像而不是中等或小..我想知道我的错误在哪里。

Answer 1

您必须限制应用的范围:

@media(max-width: 480px){
...
}

@media(min-width: 481px) and (max-width: 768px){
...
}

@media(min-width: 769px) and (max-width: 1200px){
...
}

一种更有效的方法是使用移动优先策略，将移动规则放在首位并覆盖它们以获得更高的分辨率，例如:

#slide1{
   background:url("image1.jpg"); /* mobile image */
}
@media(max-width: 768px){
    #slide1{
        background:url("image2.jpg"); /* image for 768px+ */
    }
}
@media(max-width: 1200px){
    #slide1{
        background:url("image3.jpg"); /* image for 1200px+ */
    }
}

引用:MDN - CSS media queries - MDN - Mobile first