如何在更改设备尺寸后重置 div 上的显示
How to reset display on a div after changing device size
这是我的代码，它在桌面屏幕上是水平的，在 phone 上是垂直的，x 按钮 (closebtn) 仅在 phone 上显示并关闭菜单栏。将页面大小调整为桌面大小后，如何自动再次显示它？
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>
推荐：坚持 CSS @media
您可以轻松添加媒体查询，根据视口大小确定任何给定元素的显示，无论如何这是响应式设计 的基础。在您的情况下，保持标记不变，CSS 可能类似于...
@media screen and (max-width: 1024px) { // Adjust the break-point size as needed
#tab {
display: none;
}
}
不推荐：侦听 resize 事件并检查视口大小
虽然我强烈建议不要将 JavaScript 用于构建 CSS 的东西，但可以使用 JavaScript。尝试如下操作。
- 向 window 添加
resize 事件侦听器：（例如 window.addEventListener('resize', handleResize)）
- 编写一个函数来切换
tab 元素的可见性。
- 考虑添加节流处理程序以防止过度触发事件。
这是我的代码，它在桌面屏幕上是水平的，在 phone 上是垂直的，x 按钮 (closebtn) 仅在 phone 上显示并关闭菜单栏。将页面大小调整为桌面大小后，如何自动再次显示它？
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>
推荐：坚持 CSS @media
您可以轻松添加媒体查询，根据视口大小确定任何给定元素的显示，无论如何这是响应式设计 的基础。在您的情况下，保持标记不变，CSS 可能类似于...
@media screen and (max-width: 1024px) { // Adjust the break-point size as needed
#tab {
display: none;
}
}
不推荐：侦听 resize 事件并检查视口大小
虽然我强烈建议不要将 JavaScript 用于构建 CSS 的东西，但可以使用 JavaScript。尝试如下操作。
- 向 window 添加
resize事件侦听器：（例如window.addEventListener('resize', handleResize)） - 编写一个函数来切换
tab元素的可见性。 - 考虑添加节流处理程序以防止过度触发事件。