使用 JavaScript 删除屏幕大小低于某个像素的 div

Question

我是编码新手。我知道这可以通过 css 来完成，但想通过使用 JavaScript 来完成。我有一个 div 标签，不想在 630px 屏幕尺寸下显示它。我搜索了这个网站，并在另一个问题中找到了这段 JavaScript 代码，我喜欢它：if( window.innerWidth > 630 ) {//Your Code}但是由于我是新手，我不熟悉如何将它插入到我的 PHP 代码中以及在何处插入 div，因此它仅适用于 630px 以上的屏幕。

Answer 1

这是一种在屏幕宽度小于 700px 时隐藏 div 的方法

function myFunction(x) {

  if (x.matches) { // If media query matches

    document.getElementById("divIWantedToHide").style.visibility = "hidden";

  } else {

    document.getElementById("divIWantedToHide").style.visibility = "visible";

  }

}

var x = window.matchMedia("(max-width: 700px)")

myFunction(x) // Call listener function at run time

x.addListener(myFunction)

<div id="divIWantedToHide">

tset

</div>

我个人建议您使用 CSS 来实现更精确的媒体查询。

@media only screen and (max-width: 700px) {

  #divIWantedToHide {

    display: none;

  }

}

<div id="divIWantedToHide">

tset

</div>