メディアクエリーが「中」の選択を無視しています

Question

メディアクエリーを使用して、いくつかのビューポートサイズに対して1つのコードブロックのサイズを調整しています。私が抱えている問題は、私の "中"の場所の上と下で、992と1199のサイズの間ですべてが期待通りに機能し、私のスタイルを無視しているということです。

CSS

/* Small devices (tablets, 768px and up) */ 
@@media screen (min-width: 768px) and (max-width: 991px) { 
    .smallDevices { 
     padding-bottom:30px; 
     margin-bottom:10px; 
     height: 750px; 
    } 
    .smallScreenStyle{ 
    height: 750px; 
    margin-bottom:10px; 

    } 
} 

/* Medium devices (desktops, 992px and up) */ 
@@media screen (min-width: 992px) and (max-width:1199px) { 
    .midScreenStyle{ 
     height:650px 
    } 
} 

/* Large devices (large desktops, 1200px and up) */ 
@@media (min-width: 1200px) { 
    .largeScreenStyle{ 
     height:650px; 
    } 
} 

HTML：

<div class="col-md-12 no-padding backgroundImageForPage smallScreenStyle midScreenStyle largeScreenStyle" > **strong text**</div> 

Answer 1

これはメディア機能とメディアタイプを組み合わせるための正しい構文です：

@media screen and (min-width: 992px) and (max-width:1199px) 

お知らせメディアタイプとメディア機能

Answer 2

これは、メディアクエリを使用することが意図されている方法ではありません。さまざまなブレークポイントに異なるクラスを定義するわけではありません。 1つを使用してください。

@@media screen (min-width: 768px) and (max-width: 991px) { 
    ... 
    .screenStyle{ 
     height: 750px; 
     margin-bottom:10px; 
    } 
} 

/* Medium devices (desktops, 992px and up) */ 
@@media screen (min-width: 992px) and (max-width:1199px) { 
    .screenStyle{ 
     height:650px 
    } 
} 

/* Large devices (large desktops, 1200px and up) */ 
@@media (min-width: 1200px) { 
    .screenStyle{ 
     height:650px; 
    } 
}