javascript - openNav和closeNav函数如何响应？

我正在重新设计我的个人投资组合网站，希望包含文字的边栏在移动设备上为100％屏幕宽度（屏幕尺寸 1080px）。
我一直在为实现此功能的响应性而编写JavaScript，尽管它可以在这些屏幕尺寸的各个范围内工作，但在这两个屏幕之间并不能动态地做出反应。意思是，如果在小于或等于1080px的屏幕尺寸上通过openNav()激活了onclick，则我的侧面导航将打开为100％宽度；如果在大于1080px的屏幕尺寸上激活了openNav()，则我的侧面将打开打开到50％的宽度。但是，如果我将浏览器窗口的大小（打开侧边导航）的大小从2560px的整个桌面宽度减小到1080px或更小，则侧边导航窗口将保持50％，而不是响应屏幕大小并自动变为100％。反之亦然。
我的版式设置和导航都是响应式的。
JavaScript的示例代码如下。
任何帮助将不胜感激！

function closeNav() {
    document.getElementById("svz_side_nav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}

function openNav() {
    if (max_width.matches) {
        document.getElementById("svz_side_nav").style.width = "100%";
        document.getElementById("main").style.marginRight = "";
    } else {
        document.getElementById("svz_side_nav").style.width = "50%";
        document.getElementById("main").style.marginRight = "";
    }
}

var max_width = window.matchMedia("(max-width: 1080px)");

最佳答案

如评论中所述，为此使用CSS。您可以使用100vw将宽度设置为视口的100％，将50vw设置为视口宽度的50％。将这些与媒体查询结合起来，您就一切就绪。 viewport units和media queries都一直支持到IE9。

以下是使用transform: translateX()显示和隐藏菜单的简单实现。

const toggleMenu = () => {
  const menu = document.getElementById('menu')
  menu.style.transform = menu.style.transform === 'translateX(0%)' ? 'translateX(-100%)' : 'translateX(0%)'
}

document.getElementById('menu-toggle').addEventListener('click', toggleMenu)

#menu {
  background: blue;
  height: 100vh; /* set the div height to 100% of the viewport height */
  width: 100vw; /* set the div width to 100% of the viewport width */
  transition: transform .5s;
  transform: translateX(-100%);
}

@media (min-width: 1080px) {
  #menu {
    width: 50vw; /* set the width to 50% of the viewport width on screens of 1080px or greater */
  }
}

body {
  margin: 0; /* remove default margin */
}

button {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 100;
}

<button id="menu-toggle">menu</button>
<div id="menu"></div>