Question

我想在我的网页上制作一个滑块。我使用媒体查询图像大小。这是我的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

Answer 2

嗨这对你有用吗？

#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------------------------------------*/
 /* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
   #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%;
    }
}

@media screen and (max-device-width: 640px) and (orientation: landscape){
      #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%;
    }


}
/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
       #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%;
    }
}

 /* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  @media screen and (min-device-width: 768px) and (max-device-width: 1024px){

        #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(min-width: 1024px) {
        #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%;
        }
    }

`

媒体查询无法正常工作

2 个答案: