javascript - 媒体查询断点上的 CSS 重置值(调整窗口大小或方向更改)

Question

我正在构建一个 Web 应用程序，它在桌面 上具有固定位置的 Sidenav 栏总是 可见但在移动端 Sidenav 是隐藏的，用户单击 Hamburguer 按钮将其显示为模式，当然稍后关闭它(为此使用 Javascript)。
问题
让我们想象一个 iPad，它垂直显示移动 View 但水平显示桌面 View 。如果用户是垂直的并且他切换了 Sidenav 可见然后隐藏，但是如果稍后他将方向更改为水平，则 Sidenav 将被隐藏，并且预期的行为是在桌面上 Sidenav 始终可见(我认为这是因为 CSS样式在页面渲染时加载，当我使用 JS 更改样式以切换可见性时，即使 DOM 调整大小，它仍然保持这种状态)。
问题
我想到的解决方案是有 2 个相同的 Sidenav，1 个仅在桌面上显示，1 个仅在移动设备上显示，这样 1 的样式不会影响另一个，但这意味着重复的代码。
如果我想要一个更优雅的解决方案而不复制整个代码块，我想知道是否有一种方法可以在检测到媒体查询断点时重置所有 CSS 值，或者还有什么其他解决方案？
我希望我解释得很好，谢谢你的帮助。
编辑:我找到的解决方案感谢 tacoshy 的评论
当 Resize 事件检测到断点时，它会强制触发 Sidenav 的隐藏/显示功能

  const showDrawer = () => {
    var drawer = document.querySelector('.drawer');
    var drawerBack = document.querySelector('.drawer-back');

    drawerBack.style.opacity = "1";
    drawer.style.left = "0";
    drawerBack.style.visibility = "visible"
  }

  const hideDrawer = () => {
      var drawer = document.querySelector('.drawer');
      var drawerBack = document.querySelector('.drawer-back');
  
      drawerBack.style.opacity = "0";
      drawer.style.left = "-16rem";
      setTimeout(
          () => {drawerBack.style.visibility = "hidden"}
          , 500);
  }

    window.addEventListener("resize", resizeFunction);

  const resizeFunction = () => {
    var w = window.outerWidth;
    var drawer = document.querySelector('.drawer');
    var drawerBack = document.querySelector('.drawer-back');
    if (w > 1216) {
      drawerBack.style.opacity = "1";
      drawer.style.left = "0";
      drawerBack.style.visibility = "visible";
    } else {
      drawerBack.style.opacity = "0";
      drawer.style.left = "-16rem";
      setTimeout(
        () => {drawerBack.style.visibility = "hidden"}
        , 500);
    }
  }

Answer 1

我找到的解决方案感谢 tacoshy 的评论
当 Resize 事件检测到断点时，它会强制触发 Sidenav 的隐藏/显示功能

  const showDrawer = () => {
    var drawer = document.querySelector('.drawer');
    var drawerBack = document.querySelector('.drawer-back');

    drawerBack.style.opacity = "1";
    drawer.style.left = "0";
    drawerBack.style.visibility = "visible"
  }

  const hideDrawer = () => {
      var drawer = document.querySelector('.drawer');
      var drawerBack = document.querySelector('.drawer-back');
  
      drawerBack.style.opacity = "0";
      drawer.style.left = "-16rem";
      setTimeout(
          () => {drawerBack.style.visibility = "hidden"}
          , 500);
  }

    window.addEventListener("resize", resizeFunction);

  const resizeFunction = () => {
    var w = window.outerWidth;
    var drawer = document.querySelector('.drawer');
    var drawerBack = document.querySelector('.drawer-back');
    if (w > 1216) {
      drawerBack.style.opacity = "1";
      drawer.style.left = "0";
      drawerBack.style.visibility = "visible";
    } else {
      drawerBack.style.opacity = "0";
      drawer.style.left = "-16rem";
      setTimeout(
        () => {drawerBack.style.visibility = "hidden"}
        , 500);
    }
  }