CSS-MediaQuerys werden nicht auf Mobilgeräten angezeigt

Question

Ich kann nicht herausfinden, warum meine Media-Querys nicht funktionieren. Kann mir jemand sagen, warum auf allen Telefonen und Tablets, die ich getestet habe, der DIV immer gelb ist?

.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> 
 

, was mache ich falsch?

Answer 1

Sie haben eine Medienabfrage hinzugefügt, aber Sie haben kein Meta-Tag hinzugefügt.

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

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

Meta-Tag im Kopf Abschnitt hinzufügen.

Schreiben Sie Ihren Code immer in der richtigen Reihenfolge.

@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

Verwenden höhere Auflösungen erste, neu anordnen, so Abfragen wie folgt aus:

@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

wäre es nicht besser, wie das?

.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;  
    } 
} 

Welche Geräte haben Sie verwendet?