使元素出现在最小屏幕尺寸上
Make Element Appear On Minimum Screen Size
当我缩小屏幕尺寸时,我的 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 来解决这个问题,但如果你愿意,请告诉我。
现在 CSS 优先于 JavaScript 强制导航栏可见的内联样式。
@media screen and (min-width: 671px) {
.nav {
display: block !important;
}
为什么?
JavaScript 代码设置内联样式胜过 CSS 样式。或者更好地说,总是优先于 CSS 规则,除非 CSS 规则具有 !important
。
当我缩小屏幕尺寸时,我的 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 来解决这个问题,但如果你愿意,请告诉我。
现在 CSS 优先于 JavaScript 强制导航栏可见的内联样式。
@media screen and (min-width: 671px) {
.nav {
display: block !important;
}
为什么?
JavaScript 代码设置内联样式胜过 CSS 样式。或者更好地说,总是优先于 CSS 规则,除非 CSS 规则具有 !important
。