要素を変更していないCSSのメディアクエリ？

Question

私はこのメディアクエリを動作させようとしています...私はボーダーと要素の色と位置を変更しました。それが働いたときにはっきりとわかりますが、ルールをまったく適用していないようです - 私は何を逃したのですか？私はスペースやタイプミスを探していますが、私はすべてのを見ることができない...

HTML

<div id="introcontainer"> 
    <div id="introcontainer2"> 
     <div class="introbox" id="introbox1">48</div> 
     <div class="introbox" id="introbox2">3</div> 
     <div class="introbox" id="introbox3">£99</div> 
    </div> 
</div> 

CSS

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

#introcontainer { 
    width: 660px; 
    height: 134px; 
    position: absolute; left: 50%; top: 100px; 
    margin-left: -330px; border-style: dashed; border-color: red;} 

.introbox { 
width: 214px; 
height: 130px; 
background: #fffff; 
opacity: 0.1; 
border-radius: 4px;} 
} 

#introcontainer {width: 660px; height: 134px; position: absolute; left: 50%;   top: 250px; margin-left: -330px; border-style: dashed; border-color: aqua;} 

#introcontainer2 {position: relative;} 
.introbox { 
width: 214px; 
height: 130px; 
background: #6666CC; 
opacity: 0.5; 
border-radius: 4px; 
} 

#introbox1 {position: absolute; left: 0px;} 

#introbox2 {margin-left: auto; margin-right: auto;} 
#introbox3 {position: absolute; right: 0px; top: 0px;} 

Answer 1

@mediaを閉じるのを忘れた可能性はありますか？ を削除したため：

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

これはcodepenでご覧になれます。 @ mediaの減速が間違っている可能性もありますか？

私はあなたの定期的なCSSの後に置くか、または最小/最大幅を変更する必要があると思います。

Answer 2

物事のカップルがあります。 まず、background:#fffffの.introboxは、#ffffffまたは#fffである必要があります。 第2に、@mediaのルールは、@media以外のルールによって上書きされています。これで問題はありません。@mediaルールを最初に移動するのではなく、CSSの最後に移動してください。他に必要なものがあれば教えてください。

Answer 3

通常のCSS宣言のあとでmedia query CSS部分をにすると、これはうまくいくはずです。

Answer 4

画面が< 992pxは、あなたがこのコードを使用するべきであるときは、その要素のルールを変更する場合：

@media screen and (max-width:992px){...} 

をなど、範囲クエリ避けるようにしてください：

and (min-width: 768px) and (max-width: 992px) 

をしかし、あなたが持っています「通常の」CSSの後ろに置いてください。あなたが768以下のブラウザを移動する場合、私は上記求めてきましたように、要素は変更されません - それは助け場合

は、ウェブサイトはwww.webtuu.comであり、このDEMO