Javascript 媒体查询断点上的CSS重置值（调整窗口大小或方向更改）

我正在构建一个web应用程序，它在桌面上有一个固定定位的Sidenav栏始终可见，但在移动设备上Sidenav是隐藏的，用户单击Hamburguer按钮将其显示为模态，当然稍后会将其关闭（使用Javascript）

问题

让我们想象一个iPad，垂直显示移动视图，但水平显示桌面视图。如果用户是垂直的，他将Sidenav切换为可见然后隐藏，但如果稍后他将方向更改为水平，则Sidenav将隐藏，并且预期的行为是，在桌面上Sidenav始终可见（我认为这是因为CSS样式加载在页面渲染中，当我使用JS更改样式以切换可见性时，即使DOM调整了大小，也会保持这种方式）

问题

我想到的解决方案是有两个相同的侧导航，一个仅在桌面上显示，一个仅在移动设备上显示，这样1的样式不会影响另一个，但这意味着重复的代码

如果我想要一个更优雅的解决方案而不需要复制整个代码块，我想知道是否有一种方法可以在检测到媒体查询断点时重置所有CSS值，或者还有什么其他解决方案

我希望我解释得很好，谢谢你的帮助

编辑：我找到了解决方案，感谢Tacosh的评论

当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);
    }
  }

  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);
    }
  }

---

我找到了解决方案，谢谢Tacosh的评论

当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);
    }
  }

  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);
    }
  }

---

您还可以定义媒体查询，这不仅取决于屏幕大小，还取决于横向或移动模式。您可以使用OTU JS和输入字段复选框打开和关闭侧栏，还可以使用纯HTML和CSS对其进行动画。最后但并非最不重要的是，将显示样式设置为内联样式。您可以通过添加和删除正在删除在媒体查询中写入的类。。。