Javascript 如何在移动窗口或小窗口上隐藏HTML中的元素？

我正在建立一个网站，当我在手机上打开它或将页面调整得太小时，页面顶部的徽标会以一种看起来很糟糕的方式自行调整大小。如果我能调整它的大小使它看起来更好，那就太好了，但现在我的时间不多了，只想让它消失

我尝试过编写JavaScript脚本使其消失，但失败了。我可以将可见性设置为隐藏，但我无法对页面大小进行响应，也无法检测网页是否太小而无法开始。我尝试使用onresizedom事件，但它似乎不起作用

下面是我试图让HTML使用JS函数的尝试：

<a href="website.com" class="header_logo" id="main_logo" onresize="fixBar()">
<img src="image.png">
</a>

以下是JS函数（位于页面上所有HTML的下方）不起作用：

<script type="text/javascript">
function fixBar() {
  if (window.innerWidth < 400px) {
    document.getElementById("main_logo").style.visibility = "hidden";
  } else {
    document.getElementById("main_logo").style.visibility = "visible";
  }
}
</script>

函数fixBar（）{
如果（窗内宽度<400px）{
document.getElementById（“主徽标”）.style.visibility=“隐藏”；
}否则{
document.getElementById（“主徽标”）.style.visibility=“可见”；
}
}

但正如你所看到的，我仍然不知道如何首先检查窗户是否足够小

此外，我在使用jQuery非常困难的限制下工作。如果这是我唯一的选择，那么我会使用它，但我真的不愿意。谢谢你的帮助

您可以使用它来提高响应能力

@仅媒体屏幕和（最大宽度：400px）{
#主标志{
显示：无；
}
}

---

您可以使用CSS媒体查询来完成以下操作：

@media only screen and (max-width: 400px) {
  #main_logo {
    visibility: hidden;
  }
}

---

我的处境和你的差不多；如果屏幕宽度小于我指定的宽度，它应该隐藏div。这是我使用的jquery代码

$(window).resize(function() {

  if ($(this).width() < 400) {

    $('.divIWantedToHide').hide();

  } else {

    $('.divIWantedToHide').show();

    }

});

及

签出CSS@media规则

---

您可以使用

id

和

class

id用

#

表示，class用点表示，即

确定，如果您可以使用CSS媒体查询解决此类问题

@media screen and (max-width: 480px) {
  image-container-class {
    position: relative;
    height: 90px;
    width: 150px;
    //display: none;
  }
}

---

或者，如果您试图在小型设备上隐藏徽标，请使用“无显示”。请参阅上面的注释代码。

您是一位传奇和圣人。这很有效，非常感谢。

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

@media only screen and (max-width: 400px) {
  #main_logo {
    display: none;
  }
}

@media screen and (max-width: 480px) {
  image-container-class {
    position: relative;
    height: 90px;
    width: 150px;
    //display: none;
  }
}