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

我试图在这里找到解决方案，但无法找到它。我正在处理这个响应式设计页面。在移动设备上，当您点击菜单时，主要内容div会被推到一边（通过Javascript），以显示下面的固定菜单。除了当您在计算机浏览器上看到网页（居于模拟移动设备）时，一切工作都很顺利，打开菜单，然后展开浏览器窗口，直到它遇到“桌面”断点，主内容div仍然被推到一边。有没有办法重置最大化到桌面断点时的内容（main）div的位置？我已经尝试了许多替代品无济于事。下面是与页面的jsfiddle链接：https://jsfiddle.net/luchosoto/wad3pmn0/1/div位置不会在响应页面中重置

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; 
} 
}

在此先感谢。

来源

2017-01-09 Andres MF

不被抓到担心调整浏览器大小的人。他们很少（2％）。我学到了这个错误的方式。 https://medium.com/@stephenkeable/do-users-resize-their-browser-windows-or-is-it-just-developers-and-designers-e1635cbae1e1#.crjqqhpbn – ntgCleaner

@ntgCleaner ...嗯非常好实际上建议 – alexr101

虽然扎克科比的回答听起来合乎逻辑和ntgCleaner的评论是非常有用的，你也可以添加这个CSS迫使主格的位置，你想让它：JSFiddle

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

来源

2017-01-09 21:53:04

由于您使用JavaScript来移动DIV，你还需要使用JavaScript将其移回。您需要使用window.onresize侦听器来完成此操作。你可以使用类似this answer的东西来实现。

来源

2017-01-09 21:35:20

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

回答

相关问题