これらのメディアクエリはどのように動作させるのですか？

Question

ホームページのバナー画像にメディアクエリを追加しようとしています。私はそれが反応し、使用される画面に応じて3つの異なる画像サイズに更新したい。現在、中程度のサイズの画像のみが表示されます。私のコードに何が間違っているのかを教えてください。ありがとう。

/*--------------------------------------------- 
     Section#Slider [Banner Image] 
-----------------------------------------------*/ 
/* NEXUS 5 Size 412px, XS 
(less than 786px no media query since this is 
default in Bootstrap) 
*/ 

/* IPAD SIZE 768px and up, S*/ 

@media screen and (min-width: 550px) { 
    #slider { 
     background: url("../img/smartphoneweb_640x285.jpeg") no- 
     repeat; 
     background-size: cover; 
     background-attachment: fixed; 
     background-position: 10% 0%; 
     padding: 200px 0 280px 0; 
     position: relative; 
    } 
} 

/* MD, desktops, 992px and up */ 

@media (min-width: 950px) { 
    #slider { 
     background: url("../img/smartphoneweb_1280x570.jpeg") no- 
     repeat; 
     background-size: cover; 
     background-attachment: fixed; 
     background-position: 10% 0%; 
     padding: 200px 0 280px 0; 
     position: relative; 
    } 
} 

/* LG, large desktops, 1200px and up */ 

@media (min-width: 1200px) { 
    #slider { 
     background: url("../img/smartphoneweb_1920x855.jpeg") no- 
     repeat; 
     background-size: cover; 
     background-attachment: fixed; 
     background-position: 10% 0%; 
     padding: 200px 0 280px 0; 
     position: relative; 
    } 

} 

Answer 1

あなたが主な問題は、あなた992pxメディアクエリで画面を追加するのを忘れたmin and max media query

@media screen and (min-width: 550px) and (max-width: 950px){ 
     #slider { 
      background: url("../img/smartphoneweb_640x285.jpeg") no- 
      repeat; 
      background-size: cover; 
      background-attachment: fixed; 
      background-position: 10% 0%; 
      padding: 200px 0 280px 0; 
      position: relative; 
     } 
    } 

    /* MD, desktops, 992px and up */ 

    @media (min-width: 950px) and (max-width: 1200px){ 
     #slider { 
      background: url("../img/smartphoneweb_1280x570.jpeg") no- 
      repeat; 
      background-size: cover; 
      background-attachment: fixed; 
      background-position: 10% 0%; 
      padding: 200px 0 280px 0; 
      position: relative; 
     } 
    } 
    @media (min-width: 1200px){ 
     #slider { 
      background: url("../img/smartphoneweb_1920x855.jpeg") no- 
      repeat; 
      background-size: cover; 
      background-attachment: fixed; 
      background-position: 10% 0%; 
      padding: 200px 0 280px 0; 
      position: relative; 
     } 

    } 

Answer 2

使用spicifique画面サイズのスタイルを扱うことができます。

は、ここに私のコードです。私はこれを参考に変更を加えました。

/*--------------------------------------------- 
 
     Section#Slider [Banner Image] 
 
-----------------------------------------------*/ 
 
/* NEXUS 5 Size 412px, XS 
 
(less than 786px no media query since this is 
 
default in Bootstrap) 
 
*/ 
 

 
/* IPAD SIZE 768px and up, S*/ 
 

 
@media screen and (min-width:0px) and (max-width:550px) { 
 
    #slider { 
 
     background: url("../img/smartphoneweb_640x285.jpeg") no- 
 
     repeat; 
 
     background-size: cover; 
 
     background-attachment: fixed; 
 
     background-position: 10% 0%; 
 
     padding: 200px 0 280px 0; 
 
     position: relative; 
 
    } 
 
} 
 

 
/* MD, desktops, 992px and up */ 
 

 
@media screen and (min-width:551px) and (max-width:992px){ 
 
    #slider { 
 
     background: url("../img/smartphoneweb_1280x570.jpeg") no- 
 
     repeat; 
 
     background-size: cover; 
 
     background-attachment: fixed; 
 
     background-position: 10% 0%; 
 
     padding: 200px 0 280px 0; 
 
     position: relative; 
 
    } 
 
} 
 

 
/* LG, large desktops, 1200px and up */