当元素具有样式时，媒体查询将被忽略

Question

我有一个边栏，当我按下按钮时，它会从左侧从0px滑动到160px。

通过此javascript代码完成此操作，我想添加CSS查询以使我的网站具有响应能力，但这只是打破了滑动侧边栏

Ö

这是我正在使用的CSS查询

function MenuButton() {
  var x = window.matchMedia("(min-width: 1281px)");
  var min = "0px";
  var max = "160px";
  if(x.matches)
  {
    min = "50px";
    max = "160px";
  }

  if (document.getElementById("mySidenav").style.width == max) {
        document.getElementById("mySidenav").style.width = min;
    } else {
        document.getElementById("mySidenav").style.width = max;
    }
}

按下按钮时，它将@media (min-width: 1281px) { } 添加到我的代码中，而当我想要调整窗口大小时，忽略了媒体查询。我使用css类作为样式，并且该类具有响应能力。

我该如何做？

Here is an example是我遇到的问题，您可以尝试调整窗口大小，但是一旦单击按钮，响应式设计就会消失