CSS多個@media（最小寬度）不起作用

Question

希望這是一個非常簡單的問題。

我有三個@media（最小寬度）語句，它們從移動設備開始，逐漸擴展到桌面。 由於某些原因，第三條語句不會觸發。

示例：.imgbox {高度：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 Fiddle在這里顯示效果： https ： //jsfiddle.net/t5vh316h/ （將中心分隔線拖動到不同的寬度以了解我的意思）

該框永遠不會變成藍色，最終查詢似乎被忽略了。 為什么？！

謝謝。

Answer 1

在您現有的右括號之后，您似乎有一個特殊字符，如JSFiddle中突出顯示的那樣：

只需刪除那些結尾字符，如下所示：

.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你的媒體查詢之后。 我已經更新了你的小提琴

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

事實證明，您有一些垃圾Unicode字符＃8203，將其刪除后，您的小提琴即可正常工作。

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

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