CSS 多个@media（最小宽度）不工作

Question

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

我有三个@media (min-width) 语句，从移动设备开始一直到桌面设备。出于某种原因，第三条语句没有触发。

示例： .imgbox {高度：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;} }

哪个 should resolve the issue :

Answer 2

这个问题是不必要的 dots 在你的媒体查询之后。我已经更新了你的 fiddle

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，删除它后，你的 fiddle 起作用了。

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

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

CSS 多个@media（最小宽度）不工作

CSS multiple @media (min-width) not working

html

css

media-queries