时间戳

首页 > 解决方案 > 更改设备大小后如何重置 div 上的显示

javascript - 更改设备大小后如何重置 div 上的显示

问题描述

这是我的代码，它在桌面屏幕上是水平的，在手机上是垂直的，x 按钮（closebtn）仅在手机上显示并关闭菜单栏。将页面大小调整为桌面大小后，如何再次自动显示它？

function oty() {
  document.getElementById("tab").style.display = "none";
}
<div class="icon-bar" id="tab">
  <button class="closebtn" onclick="oty()">X</button>
  <button class="tablink">Home</button>
  <button class="tablink">News</button>
  <button class="tablink">Contact</button>
  <button class="tablink">About</button>
    </div>

标签： javascripthtmlcssresponsive-design

解决方案

推荐：坚持 CSS@media

您可以轻松添加媒体查询，根据视口大小确定任何给定元素的显示，这无论如何都是响应式设计的基础。在您的情况下，保持标记不变，CSS 可能类似于...

@media screen and (max-width: 1024px) { // Adjust the break-point size as needed
  #tab {
    display: none;
  }
}

不推荐：监听resize事件并检查视口大小

虽然我强烈建议不要将 JavaScript 用于构建 CSS 的东西，但使用 JavaScript 是可能的。尝试以下操作。

  1. 向窗口添加resize事件侦听器：（例如window.addEventListener('resize', handleResize)）
  2. 编写一个函数来切换tab元素的可见性。
  3. 考虑添加一个节流处理程序以防止过度触发事件。

推荐阅读