CSS multiple @media (min-width) funktioniert nicht

Question

hoffentlich eine sehr einfache Frage.

Ich habe drei @ media (min-width) Anweisungen beginnend bei mobilen und aufbauend auf Desktop. Aus irgendeinem Grund wird die dritte Anweisung nicht ausgelöst.

Beispiel: .imgbox {height: 100px; width: 100px;}

@media (min-width: 768px) and (max-width: 899px) { .imgbox { background-color:red; } } 

@media (min-width:900px) and (max-width: 1000px) { 
     .imgbox { background-color:green;} 
}​ 

@media (min-width:1001px) { 
    .imgbox { background-color:blue;} 
}​ 

JS Fiddle Effekt hier zeigen: https://jsfiddle.net/t5vh316h/ (ziehen Sie den mittleren Teiler auf unterschiedliche Breiten, um zu sehen, was ich meine)

Die Box nie blau wird, scheint die letzte Abfrage ignoriert werden. Warum?!

Vielen Dank.

Answer 1

Sie scheinen einen besonderen Charakter nach Ihren bestehenden Schließ Klammern zu haben, wie in Ihrem JSFiddle hervorgehoben:

einfach jene nachfolgenden Zeichen entfernen, wie unten zu sehen:

.imgbox {height: 100px; width: 100px;} 
@media (min-width: 768px) and (max-width: 899px) { .imgbox { background-color:red; } } 
@media (min-width:900px) and (max-width: 1000px) { .imgbox { background-color:green;} } 
@media (min-width:1001px) { .imgbox { background-color:blue;} } 

Welche should resolve the issue:

Answer 2

Das Problem war dots nach Ihren Medienabfragen nicht erforderlich. Ich habe aktualisiert Ihre Geige

https://jsfiddle.net/t5vh316h/4/

.imgbox {height: 100px; width: 100px;} 

@media (min-width: 768px) and (max-width: 899px) { 
    .imgbox { background-color:red; } 
} 

@media (min-width:900px) and (max-width: 1000px) { 
    .imgbox { background-color:green;} 
} 

@media (min-width:1001px) { 
    .imgbox { background-color:blue;} 
} 

Answer 3

Es stellt sich heraus Sie einige Müll Unicode-Zeichen # 8203 hatte, nach dem Entfernen es, Ihre Geige gearbeitet.

https://jsfiddle.net/t5vh316h/5/

@media (min-width:900px) and (max-width: 1000px) { 
     .imgbox { background-color:green;} 
}​​