複数の@media（分）が動作しない

Question

うまくいけば非常に簡単な質問です。

私は3つの@media（min-width）文をモバイルから始め、デスクトップにビルドしています。何らかの理由で、3番目のステートメントは起動しません。

例： .imgbox {height：100px;幅：100ピクセル;}

@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フィドル、ここで効果を表示する：https://jsfiddle.net/t5vh316h/（私が何を意味するかを確認するために、異なる幅に中央分離帯をドラッグ）

をボックスが青になりません、最後のクエリは思わ無視される。なぜ？！

ありがとうございます。

Answer 1

あなたJSFiddleで強調されているように、既存の決算かっこ次の特殊文字を持っているように見える：

下図のように単純にそれらの末尾の文字を削除します。

should resolve the issue

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

あなたのメディアクエリの後に問題は不要でしたdots。私はそれはあなたのフィドルが働いて、あなたがそれを削除した後、いくつかのゴミUnicode文字＃8203を持っていたが判明あなたフィドル

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

を更新しました。

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

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