div 位置不会在响应式页面中重置

Question

我试图在这里找到解决方案，但找不到。我正在处理这个响应式设计页面。在移动设备上，当您点击菜单时，主要内容 div 会被推到一边（通过 Javascript）以显示下方的左侧固定菜单。一切都很好，除了当你在电脑浏览器（模拟移动设备）上看到网页时，打开菜单然后展开浏览器 window 直到它到达 "desktop" 断点，主要内容 div 仍然被推到一边。有没有办法在最大化到桌面断点时重新设置content(main)div的位置？我尝试了很多替代方法都无济于事。这是一个带有页面的 jsfiddle link：https://jsfiddle.net/luchosoto/wad3pmn0/1/

CSS为主要内容div:

#main {
top: 0;
bottom:0;
width: 100%;
position:fixed;
overflow-y:scroll;
-webkit-overflow-scrolling: touch;
overflow-x:hidden;
z-index: 2;
transition: 500ms;
box-sizing: border-box;

}

Javascript 将主 div 推到一边以显示菜单：

var counter = 1;
function toggleNav() {

if (counter == 1){
    document.getElementById("main").style.transform = "translateX(60%)";
    counter = 0;
}else{
    document.getElementById("main").style.transform = "translateX(0%)";
    counter = 1;
}
}

提前致谢。

Answer 1

由于您正在使用 javascript 移动 div，因此您还需要使用 javascript 将其移回。您需要使用 window.onresize 侦听器来完成此操作。您可以使用 this answer 之类的东西来实现。

Answer 2

虽然 Zack Kirby 的回答听起来合乎逻辑并且 ntgCleaner 的评论非常有用，但您还可以添加此 CSS 以将主要 div 位置强制到您想要的位置：JSFiddle

@media screen and (min-width: 801px) {
  #main {
    transform: translateX(0) !important;
  }
}

div 位置不会在响应式页面中重置

div position won't reset in responsive page

html

javascript

css

responsive-design

off-canvas-menu