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

Question

我正在显示一个 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>

Answer 1

您必须使用 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>