медиа-запросы не работают

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). Но ширина экрана меньше 768 пикселей, а загрузка большого изображения вместо среднего или маленького. Я хочу знать, где моя ошибка.

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%; 
     } 
    } 

`