Question

我有一个移动菜单，设置为在加载时不显示，然后在媒体上查询其设置为显示块。

我过去总是这样做但没有问题。但这不起作用。

在firefox检查器中查看时，我可以看到css媒体查询被标准css覆盖了。知道为什么吗？

小提琴：

备份代码：

    <nav class="header-nav">
        <ul id="nav">
            <li><a href="#homepage-gallery" class="scroll">Gallery</a></li>
            <li><a href="#homepage-about" class="scroll">About</a></li>
            <li><a href="#homepage-contact" class="scroll">Contact</a></li>
            <li><a href="#homepage-loyalty" class="scroll">Loyalty Card</a></li>
        </ul>
    </nav>

    <div class="header-nav-mobile">
        Menu
    </div>

@media only screen 
and (min-width : 320px) 
and (max-width : 568px) {

.header-nav-mobile {
    display: block;
}

#nav {
    display: none;
}

}

.header-nav-mobile {
    float: right;
    line-height: 40px;
    width: 60px;
    height: 40px;
    text-align: center;
    color: #fff;
    background-color: #404040;
    cursor: pointer;
    display: none;
}

Answer 1

尝试将媒体查询置于默认的css代码下方，如下所示：

.header-nav-mobile {
    float: right;
    line-height: 40px;
    width: 60px;
    height: 40px;
    text-align: center;
    color: #fff;
    background-color: #404040;
    cursor: pointer;
    display: none;
}
@media only screen 
and (min-width : 320px) 
and (max-width : 568px) {
  .header-nav-mobile {
      display: block;
  }
  #nav {
      display: none;
  }
}

工作小提琴：http://jsfiddle.net/25zJX/1/

Answer 2

@mediaquery放错地方，将其剪切并粘贴在底部。

媒体查询不会覆盖原始显示样式

2 个答案: