使元素显示在最小屏幕大小上

Make Element Appear On Minimum Screen Size

本文关键字：屏幕 元素 显示      更新时间：2023-09-26

当我缩小屏幕大小时，我的标题中有一个错误。导航应该会消失（只有在点击移动导航图标时才会重新出现），这很好。然而，如果我单击移动导航图标，然后再次单击以隐藏它，即使我再次扩大屏幕大小，导航也会保持隐藏状态。

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

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。我也可能错误地使用了min-width媒体查询，但我不确定。

我想你不需要看我的HTML就可以明白这一点，但如果你愿意，请告诉我。

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

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

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

相关文章：