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

當我縮小屏幕尺寸時，我的頭中有一個錯誤。該導航應該消失（只有在移動導航圖標被點擊時纔會重新出現），這個工作正常。但是，如果我點擊移動導航圖標，然後再次點擊以隱藏它，即使再次擴大屏幕尺寸，導航欄仍保持隱藏狀態。使元素在最小屏幕尺寸上出現

我希望導航屏幕再次顯示時，屏幕達到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在某種程度上得到display: none從任我670px媒體查詢，或從javascript函數。我也可能會誤用min-width媒體查詢，但我不確定。我假設你不需要看到我的HTML來弄清楚這一點，但如果你願意，讓我知道。

來源

2015-02-07 123

您需要在最小寬度查詢中使用'！important'。 JavaScript代碼設置內聯樣式通過CSS樣式獲勝。或者說，除非CSS規則具有'！important'，否則總是優先考慮CSS規則。 – Mouser 2015-02-07 08:48:35

哇...我可以發誓我試過了。但是，這是有效的！ – 123 2015-02-07 08:51:41

現在，CSS優先於JavaScript內聯樣式，強制導航欄顯示。

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

爲什麼？ JavaScript代碼設置內聯樣式通過CSS樣式獲勝。或者說，除非CSS規則有!important，否則總是優先考慮CSS規則。

來源

2015-02-07 08:52:21 Mouser

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

回答

相關問題