为什么背景颜色消失了？

Question

查看http://granthoneymoon.com/temp.html

处的#header容器

在浏览器宽度为360到499时，＃header的背景颜色消失了，我不明白为什么。它与其他宽度的css基本相同！它在Dreamweaver中工作正常，但是当在浏览器（IE或Firefox）中实际查看时问题浮出水面。有关进展情况的任何线索???

@media screen and (min-width: 500px) and (max-width: 954px)  {
    #header {
    background-color: #18436C;
    min-height: 10px;
    overflow: hidden;
}
}
@media screen and (max-width: 499px) and (min-width: 360) {
#header {
    background-color: #18436C;
    width: 100%;
    min-height: 10px;
    overflow: hidden;
}
}
@media screen and (max-width: 359px) {
#header {
    background-color: #18436C;
    width: 100%;
    max-width: 360px;
    min-height: 10px;
    overflow: hidden;
}
}

Answer 1

您错过了min-width的单位：

@media screen and (max-width: 499px) and (min-width: 360) {

应该是：

@media screen and (max-width: 499px) and (min-width: 360px) {

---

顺便说一下。为什么不将共同的价值观分开并避免这么多的重复呢？

#header {
    background-color: #18436C;
    min-height: 10px;
    overflow: hidden;
}

@media screen and (min-width: 500px) and (max-width: 954px)  {

}
@media screen and (max-width: 499px) and (min-width: 360px) {
#header {
    width: 100%;
}
}
@media screen and (max-width: 359px) {
#header {
    width: 100%;
    max-width: 360px;
}
}