媒体查询不会覆盖原始显示样式(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/
更多推荐
发布评论