CSSで最初の2つのメディアクエリのみが動作します。残りは無視されています

Question

私の問題は本当に簡単な解決策であると確信しています。

私はツリーメディアクエリを持っていますが、最初の2つの作品のみです。 800pxは電話で見たときに無視されるだけです。

div { 
 
    color: yellow; 
 
    font-size: 50px; 
 
} 
 

 
@media (max-width: 1200px) { 
 
    div { 
 
    color: red; 
 
    } 
 
} 
 

 
@media (max-width: 1000px) { 
 
    div { 
 
    color: green; 
 
    } 
 
} 
 

 
@media (max-width: 800px) { 
 
    div { 
 
    color: purple; 
 
    } 
 
}

<div>Hello</div>

Answer 1

だけでブラウザのウィンドウのサイズを変更する場合、コードはデスクトップ上で正常に動作しますので、1に

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

Answer 2

を初期規模なセットを使用してHTMLにメタタグを追加し、画面サイズをエミュレートするためにクロムを使用していないため、エミュレータで問題が発生する可能性があります。モバイルデバイスにページをロードするか、いくつかのエミュレータを試してみてください。