Question

我试图在这里找到解决方案但找不到它。我正在研究这个响应式设计页面。在移动设备上，当您点击菜单时，主要内容div被推到一边（通过Javascript）以显示下面的左侧固定菜单。一切都很好，除了当你在计算机浏览器上看到网页（模仿移动设备），打开菜单，然后展开浏览器窗口，直到它到达“桌面”断点，主内容div仍被推到一边。有没有办法在最大化到桌面断点时重置内容（主）div的位置？我尝试过很多替代方案都没有用。这是一个带有页面的jsfiddle链接：https://jsfiddle.net/luchosoto/wad3pmn0/1/

主要内容div的CSS：

#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：

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的评论非常有用，但你也可以添加这个强制主div位置的CSS到你想要的位置：JSFiddle

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

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

2 个答案: