时间戳

首页 > 解决方案 > 如何在移动设备或小窗口上隐藏 HTML 中的元素？

javascript - 如何在移动设备或小窗口上隐藏 HTML 中的元素？

问题描述

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

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

这是我尝试让 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>

但是正如您所看到的，如果窗口足够小，我仍然不知道如何首先检查。

此外，我的工作受到限制，使得使用 jQuery 变得非常困难。如果那是我唯一的选择，那么我会使用它，但我真的不想这样做。感谢您的帮助！

标签： javascripthtmlmobile

解决方案

您可以使用CSS 媒体查询来获得响应。

@media only screen and (max-width: 400px) {
  #main_logo {
    display: none;
  }
}
<a href="website.com" class="header_logo" id="main_logo">
  <img src="https://placeholder.pics/svg/200x50">
  <div>Any HTML element</div>
</a>

在这里，当窗口大小小于400px带有的元素时id="main_logo"将被移除。

另一个 CSS 规则是visibility: hidden;

display: none;和有区别 在这里visibility: hidden; 查看

推荐阅读