你可以做css的例子

@media only screen and (max-width:987px) {
.menu{
margin-left:150px;
}
}

如果我没理解错你的问题，你希望你的按钮点击有一个条件行为-点击应该工作在分辨率小于789px宽度（这个问题不是具体的，但我假设你的意思是宽度）。
要实现这一点，您可以在下面的代码中执行类似的操作（适当的小提琴可以是found here-在其中，您可以试验文档的宽度，这是您在SO上无法执行的操作）。

const nav = document.getElementsByTagName("nav")[0];
const btn = document.getElementById("clicker");

btn.addEventListener("click",moveHeader);

function moveHeader() {
  let wd = window.innerWidth;
  console.log(wd);
  if(wd < 789) {
    nav.classList.toggle("moved");
  } else {
    nav.classList.remove("moved");
  }
}

window.addEventListener("resize", function() {
    if(this.innerWidth > 789) {
        nav.classList.remove("moved");
    }
});

#controller {
  display: inline-block;
  width: 100px;
  position: relative;
  border-right: 2px solid black;
}
button {
  margin: 15px auto;
}
#content {
  display: inline-block;
  overflow: hidden;
}
#content div, nav {
  display: block;
}
nav {
  width: 100%;
  background-color: #ccc;
}
nav a {
  padding: 15px;
}
#content div {
  margin-top: 15px;
  margin-left: 15px;
}
.moved {
  margin-left: 150px;
}

<div id="controller">
  <button id="clicker">
  Click me
  </button>
</div>
<div id="content">
<nav>
  <a href="#">Home</a>
  <a href="#">Portfolio</a>
  <a href="#">Contact</a>
</nav>
<div>
Lorem ipsum sit dolor amet etc
</div>
</div>

有几点需要注意：

• 类moved包含了将标题/导航向右移动（150px）的CSS规则。2还有其他方法可以实现这个目标（position: absolute等），但我决定用最简单的一个来说明。
• 如果你想有一个相当平滑的头部来回移动的动画，你可以改变这些规则（或者根据你的特殊情况调整它们）：

nav {
  width: 100%;
  background-color: #ccc;
  transition: 0.5s; /* this part here */
}

...

.moved {
  margin-left: 150px;
  transition: 0.5s; /* this part here */
}

• 单击按钮时会切换相同的类（moveHeader函数），当且仅当窗口宽度小于789px.使用toggle的原因-您的用户可能会不断点击按钮，它会不断发送标题/导航离开，并拉回来.因为我不知道您的页面布局，这个解决方案可以让你打开和关闭导航，发送到屏幕外，并把它带回来，等等
• 窗口附带了一个事件监听器--你的用户可能会改变浏览器的宽度，他们可能会在桌面上堆叠窗口，他们可能会旋转平板电脑和手机等，通过这样做，他们可能会改变屏幕宽度。如果发生这种情况，你需要能够回到〈789px宽度的原始功能。当然，这个代码只包含了宽度的变化。2对于处理屏幕方向的潜在变化，请参见this SO answer--一定要检查附加的canIUse屏幕截图。