媒体查询不会覆盖原始显示样式(Media query NOT overriding original display styling)

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

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

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

小提琴：

http://jsfiddle.net/4BRRg/

备份代码：

<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; }

i have a mobile menu that is set to display none on load, and then on the media query its set to display block.

I have always done this in the past but had no issues. However this will not work.

When checking it out in firefox inspector, i can see that the css media query is being over ridden by the standard css. Any idea why?

fiddle:

http://jsfiddle.net/4BRRg/

Backup code:

<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; }

最满意答案

尝试将媒体查询放在默认的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/

Try putting your media queries below your default css code like so:

.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; } }

Working Fiddle: http://jsfiddle.net/25zJX/1/

更多推荐