メディアクエリーの1つだけが機能しないのはなぜですか？

Question

ウェブサイトで複数のメディアクエリを使用していますが、最大のもの（最小幅：1201ピクセル）が変更を実装していない唯一のものです。ここで私は、私の使用CSSで見られるように正確に入力したクエリがあり、この正確な順序で：

<meta name="viewport" content="width=device-width, initial-scale=1"> 

：私はindex.htmlをの頭の中でmetaタグが含まれている

@media only screen and (min-width: 320px) {} 

@media only screen and (min-width:480px) {} 

@media only screen (min-width: 768px) and (max-width: 991px) {} 

@media only screen (min-width: 992px) and (max-width: 1200px) {} 

@media screen (min-width: 1201px) {} 

私が奇妙に感じたもう一つのことは、index.htmlにあります。バックグラウンドの写真に異なるサイズの写真を使ってメディアクエリを適用しました。

本当にあなたのうちの1人が、私が逃しているものを突き止めることができると願っています。

Answer 1

これらのクエリがすべて機能しているわけではありません。私はこれがあなたの後であると思います。

@media only screen and (min-width: 320px) and (max-width: 479px) {} 
@media only screen and (min-width:480px) and (max-width: 767px) {} 
@media only screen and (min-width: 768px) and (max-width: 991px) {} 
@media only screen and (min-width: 992px) and (max-width: 1200px) {} 
@media screen and (min-width: 1201px) {} 

は、ここでは、アクションでそれを参照してください。https://jsfiddle.net/e7wdmca4/1/

Answer 2

あなたは "と" 最後のクエリで不足している： @media画面と（最小幅：1201px）{}