CSS多个@media（最小宽度）不起作用答案

【问题标题】：CSS multiple @media (min-width) not workingCSS多个@media（最小宽度）不起作用
【发布时间】：2016-07-01 00:14:08
【问题描述】：

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

我有三个@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/（将中心分隔线拖动到不同的宽度以了解我的意思）

框永远不会变成蓝色，最后的查询似乎被忽略了。为什么？！

谢谢。

【问题讨论】：

你确定语法吗？似乎第一个媒体查询缺少一个结束括号
@PIIANTOM，它就在那里。
看起来你在 jsfiddle 中有一个特殊的字符，在你的右括号之后，用红色着色，只需删除它们就可以了。
提示：由于您在每个媒体查询中覆盖了所有先前设置的值（背景颜色），因此您可以完全划掉最大宽度分配！

标签： html css media-queries

【解决方案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：

【讨论】：

谢谢你 - 多么奇怪。我责怪 net2ftp。

【解决方案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;}
}

【讨论】：

【解决方案3】：

原来你有一些垃圾 unicode 字符 #8203，删除它后，你的小提琴奏效了。

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

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

【讨论】：