CSS多个@media(min-width)不起作用

Question

希望是一个非常简单的问题.

我有三个@media(min-width)语句从移动开始并构建到桌面.由于某种原因,第三个声明不会触发.

示例:.imgbox {height:100px; 宽度: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在这里显示效果: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;} }

哪个应该解决问题: