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

Posted 2023-03-06

【中文标题】媒体查询断点上的 CSS 重置值（调整窗口大小或方向更改）

【英文标题】：CSS reset values on Media Query Breakpoint (Resize window or Orientation changes)

【发布时间】：2021-03-31 13:43:06

【问题描述】：

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

问题

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

问题

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

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

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

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

当调整大小事件检测到断点时，它会强制触发 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);
    
  

【问题讨论】：

您还可以定义媒体查询，不仅取决于屏幕大小，还取决于横向或纵向模式。您可以使用带有输入字段复选框的otu JS打开和关闭侧边栏，也可以使用纯html和CSS对其进行动画处理。最后但同样重要的是，将显示样式设置为内联样式。您可以通过添加和删除在媒体查询中编写的类来实现样式...

【参考方案1】：

我找到的解决方案感谢 tacoshy 的评论

当调整大小事件检测到断点时，它会强制触发 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);