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位置不會在響應頁面中重置

回答

相關問題