我试图使内容显示在点击，但只有在屏幕宽度为700像素。如果用户按下按钮，并调整其窗口大小，内容消失。
基本上，我的代码看起来像这样：

function myFunction() {
  var dropdownContent = document.getElementById('dropdown-content');
  var landing = document.getElementById('landing');
  const mediaQuery = window.matchMedia('(max-width: 700px)')
  if (dropdownContent.style.display == "none" && mediaQuery.matches) {
    dropdownContent.style.display = "block";
    landing.style.display = "none";
  } else {
    landing.style.display = "block";
    dropdownContent.style.display = "none";
  }
}

#dropdown-content {
  display: none;
}
@media only screen and (max-width: 870px) {
  #dropdown-content {
    display: none;
  }
}
@media only screen and (max-width: 700px) {
  #dropdown-content {
    display: none;
  }
}

<button onclick="myFunction()">About</button>
<div id="dropdown-content" style="display:none"></div>
<div id="landing"></div>

我试着处理媒体查询或各种“window.innerwidth”之类的东西，但似乎什么都不起作用！我猜JavaScript将所有的“display：none”更改为“display：block”，但我只是试图在**@media only screen和（max-width：700 px）**下切换“display：none”。