メディアクエリーが機能しない

-1

初めてメディアクエリーを使用しようとしています。私は私の頭の中に次のメタタグを持っています。メディアクエリーが機能しない

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

これは私のHTMLです。

<p id="quote-box">"Quote."</p>

私のCSSには次のコードがあります。

#quote-box { 
    background: darkred; 
    width: 100%; 
    color: white; 
    height: 21%; 
} 

@media (min-width:900px){ 

    #quote-box { 
     background: darkred; 
     width: 100%; 
     color: white; 
     height: 10%; 
    } 
}

私は何を試してやるべきかわかりません。事前にお寄せいただきありがとうございます。

出典

2017-02-15 entry-coder

'@media画面と（最小幅：900px）{ 'または' @media全てと（最小幅：900px）{' – Scott

あなたは正しくメディアクエリを使用しています。あなたのCSSはわずかにオフです。

スニペットを表示するときは、フルスクリーンで表示し、ウィンドウの幅を変更します。

したがっては青色で、小さい場合はwindow.width > 900pxと表示されます。それ以外の場合は赤色ですが、大きくなります。

#quote-box { 
 
    background: darkred; 
 
    display: block; 
 
    width: 100%; 
 
    color: white; 
 
    height: 200px; 
 
} 
 

 
@media all and (min-width:900px){ 
 
    #quote-box { 
 
     background: blue; 
 
     width: 100%; 
 
     color: white; 
 
     height: 100px; 
 
    } 
 
}