html - 向后增加浏览器大小时如何显示div？

我正在显示一个div。当我单击关闭/打开时，div隐藏或显示。

我想要的是，当div隐藏时，并且当我将浏览器大小增加到> 767px时，div应该自动显示回去。

要对其进行测试，请先减小浏览器的大小，然后单击关闭以隐藏div，然后再次增大浏览器的大小，然后div应该显示回来，但不会

如何实现呢？

/* Set the width of the side navigation to 250px */
function openNav() {
    document.getElementById("demo").style.display = "block";
}

/* Set the width of the side navigation to 0 */
function closeNav() {
    document.getElementById("demo").style.display = "none";
}

#demo{
   display:block;
}


@media screen and (max-width: 767px) {
        #demo {
            display: none;
        }
}

<div id="demo">Hello</div>

<span onclick="openNav()">Open</span>
<span onclick="closeNav()">Close</span>

最佳答案

您必须使用min-width而不是max-width来实现此目的。我还使用了!important，尽管我非常鄙视，但仍需要使用它来覆盖JavaScript设置的样式。

@media screen and (min-width: 767px) {
    #demo {
        display: block!important;
    }
}

片段：

/* Set the width of the side navigation to 250px */
function openNav() {
  document.getElementById("demo").style.display = "block";
}

/* Set the width of the side navigation to 0 */
function closeNav() {
  document.getElementById("demo").style.display = "none";
}

#demo {
  display: block;
}

@media screen and (min-width: 767px) {
  #demo {
    display: block!important;
  }
}

<div id="demo">Hello</div>
<span onclick="openNav()">Open</span>
<span onclick="closeNav()">Close</span>

关于html - 向后增加浏览器大小时如何显示div？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48441865/