Question

我很尴尬地问这个问题，但我已经尝试了各种各样的想法并且搜索了很多。

HTML：

<div class="image-full"></div>

CSS：

.image-full {width:100px;height:100px;background-color:#000;}

@media (max-width: 767px) {
    .image-full {background-color:#f00;}
    body {background-color:#f00;}
}
@media (min-width: 768px) and (max-width: 991px) {
    .image-full {background-color:#0f0;}
    body {background-color:#0f0;}
}
@media (min-width: 992px) and (max-width: 1199px) {
    .image-full {background-color:#00f;}
    body {background-color:#00f;}
}
@media (min-width: 1200px) {
    .image-full {background-color:#ff0;}
    body {background-color:#ff0;}
}

我只想让div改变背景颜色，就像身体背景一样。

我错过了什么？

在这里小提琴：http://jsfiddle.net/bn5bh6xj/

修改

以下两种解决方案均可使用。

我的问题是我的CSS代码中有一个隐藏的字符（Â）。当我在我的mac上编码时（在Sublime Text和Coda中，在几个不同的Mac和OS X版本上），我有时会得到它们。我花了好几个小时试图找到它们的原因，但没有运气。它们在打开括号块之前总是出现在PHP中，如下所示：

if (hello > 1)Â {

}

仅当我从UTF-8更改为ISO 8859-1时，它们才可见。

Answer 1

在背景颜色后添加!important：

@media (max-width: 767px) {
    .image-full {
        background-color:#f00 !important;
    }
    body {
        background-color:#f00;
    }
}

FIDDLE

Answer 2

从顶部删除background-color声明。它覆盖了媒体查询中的background-color声明。

CSS媒体查询和div背景颜色

2 个答案: