CSS-MediaQuerysがモバイルデバイスに表示されない

Question

私のメディアクエリーが動作していない理由はわかりません。誰かが、私がテストしたすべての携帯電話とタブレットでなぜDIVがいつも黄色であるのですか？

.test { 
 
    display: block; 
 
    width: 100%; 
 
    height:500px;   
 
} 
 

 
@media all and (max-width: 360px) { 
 
    .test { 
 
    background-color:aqua;  
 
    } 
 
} 
 
@media all and (min-width: 360px) { 
 
    .test { 
 
    background-color: #CCC;  
 
    } 
 
}  
 
@media all and (min-width: 768px) { 
 
    .test { 
 
    background-color: #FFE000;  
 
    } 
 
}

<div class="test">sfds fsdf dsfsd</div> 
 

私が間違って何をやっていますか？

Answer 1

メディアクエリを追加しましたが、メタタグを追加していません。

https://css-tricks.com/snippets/html/responsive-meta-tag/

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

あなたの頭の部分にメタタグを追加します。

常にコードを順番に記述してください。最初

@media all and (min-width: 360px) { 
.test { 
    background-color: #CCC;  
} 
} 
@media all and (min-width: 768px) { 
.test { 
    background-color: #FFE000;  
} 
} 
@media all and (max-width: 360px) { 
.test { 
    background-color:aqua;  
} 
} 

Answer 2

利用高解像度なので、そのようなクエリを並べ替える：

@media all and (min-width: 768px) { 
    .test { 
     background-color: #FFE000;  
    } 
} 
@media all and (min-width: 360px) { 
    .test { 
     background-color: #CCC;  
    } 
} 
@media all and (max-width: 360px) { 
    .test { 
     background-color:aqua;  
    } 
} 

Answer 3

は、それはそのようなより良いのではないでしょうか？

.test { 
    display: block; 
    width: 100%; 
    height:500px; 
    background-color:aqua;  
} 

@media all and (min-width: 360px) { 
    .test { 
    background-color: #CCC;  
    } 
}  
@media all and (min-width: 768px) { 
    .test { 
    background-color: #FFE000;  
    } 
} 

どのデバイスを使用しましたか？