如何在移动端或小窗口下隐藏HTML元素？Logo适配问题求助

首先，咱们先梳理下你代码里的几个核心问题，然后给你两种高效解决方案——一种是修复你的JavaScript代码，另一种是更省心的CSS方案（毕竟你说时间紧迫，这个可能帮你更快搞定）。

为什么原有代码不工作？ #

• onresize绑定对象错误：resize事件是属于window全局对象的，不是<a>标签，把onresize="fixBar()"写在logo的链接标签上完全不会触发事件。
• 条件判断的单位错误：window.innerWidth返回的是纯数字（比如400），但你写了400px（字符串），两者比较会导致逻辑判断失效。
• 缺少初始加载检测：页面刚加载时没有执行fixBar()，所以即使窗口一开始就小于400px，logo也不会自动隐藏。

方案1：修复JavaScript代码 #

先修正函数逻辑，再把事件绑定到正确的对象上，同时添加页面初始化调用：

第一步：更新HTML（移除无效的onresize） #

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

第二步：完善JS函数与事件绑定 #

function fixBar() {
  const logoElement = document.getElementById("main_logo");
  // 注意：window.innerWidth是数字，直接和400比较即可，无需加px
  if (window.innerWidth < 400) {
    logoElement.style.visibility = "hidden";
  } else {
    logoElement.style.visibility = "visible";
  }
}

// 页面加载完成后立即执行一次，确保初始状态正确
window.addEventListener('load', fixBar);
// 监听窗口大小变化，实时调整logo显示状态
window.addEventListener('resize', fixBar);

如果不需要等待图片完全加载，也可以用DOMContentLoaded代替load，触发时机更早：

window.addEventListener('DOMContentLoaded', fixBar);

方案2：用CSS媒体查询（零JS，更快捷） #

既然你的需求只是在窗口小于400px时隐藏logo，用CSS媒体查询是最省心的方式，完全不需要写JS，调试成本为零：

/* 当窗口宽度小于400px时隐藏logo */
@media (max-width: 399px) {
  #main_logo {
    visibility: hidden;
  }
}

/* 窗口宽度大于等于400px时显示logo */
@media (min-width: 400px) {
  #main_logo {
    visibility: visible;
  }
}

把这段CSS加到你的样式表或者页面的<style>标签里就行，浏览器会自动响应窗口大小变化，比JS更高效。

两种方案都能解决你的问题，如果你时间特别紧张，优先选CSS方案；如果必须用JavaScript实现，就用方案1的代码即可。

内容的提问来源于stack exchange，提问作者Ben