使元素出现在最小屏幕尺寸上

Question

当我缩小屏幕尺寸时，我的 header 出现错误。导航应该消失（只有在单击移动导航图标时才会重新出现），这工作正常。但是，如果我单击移动导航图标，然后再次单击它以隐藏它，即使我再次扩大屏幕尺寸，导航仍保持隐藏状态。

我希望当屏幕达到 670 像素时再次显示导航。

CSS

@media screen and (min-width: 671px) {
.nav {
    display: block;
    }   
}

@media screen and (max-width: 670px) {
.navicon {
    display: block;   
}
.homeiconcontainers {
    float: none;
    width: 100%;
}
.header {
    background: none;
    opacity: 1;
}
.pagelinkcontainers {
    float: none;
    line-height: 50px;
    background-color: black;
    width: 200px;
    padding-right: 0px;
    text-align: center;
}
ul {
    padding-left: 20px; 
}
.nav {
    display: none;
}   
}

JavaScript

// Show Mobile Navbar Onclick

function MobileMenu (object) {

var elements={"nav":{title: "nav"}};
var mobiledisplay = window.getComputedStyle(document.getElementById("nav")).display;

//Show nav element
for(var nav in elements) {

    if(object!==nav) {

        document.getElementById(nav).style.display='none';
    }
    if(object==nav && mobiledisplay=='block') {

        document.getElementById(nav).style.display='none';   
    }
    else {

        document.getElementById(nav).style.display='block';
        location.hash=pages[nav].title;
        document.title=pages[nav].title;
    }
}
}

我的 .nav 以某种方式从我的 670px 媒体查询或 javascript 函数中获取 display: none。我也可以是 mis-using min-width 媒体查询，但我不确定。

我假设你不需要看我的 HTML 来解决这个问题，但如果你愿意，请告诉我。

Answer 1

现在 CSS 优先于 JavaScript 强制导航栏可见的内联样式。

@media screen and (min-width: 671px) {
.nav {
    display: block !important;
}

为什么？ JavaScript 代码设置内联样式胜过 CSS 样式。或者更好地说，总是优先于 CSS 规则，除非 CSS 规则具有 !important。

使元素出现在最小屏幕尺寸上

Make Element Appear On Minimum Screen Size

javascript

css

media-queries

nav