為什么在移動頁面加載時我的導航欄不會崩潰

Question

我試圖在移動設備上折疊導航欄，但只有在我手動調整選項卡大小時導航欄才會折疊。 所以這可能與它在啟動站點時沒有檢查屏幕大小有關。 我已經用 addeventlisteners 嘗試了一些東西，但我只是不斷收到錯誤，因為操作意外的標記。 我的原始代碼是：

function openNav() {
  document.getElementById("mySidebar").style.width = "190px";
  document.getElementById("main").style.marginLeft = "190px";
}

function closeNav() {
  document.getElementById("mySidebar").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}





var x = window.matchMedia("(max-width: 600px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes


function myFunction(x) {
  if (x.matches) { // If media query matches
      
      closeNav()
    
  }
    
  
}

在向一些人尋求幫助后，我最終開始弄亂這個：

var x = window.matchMedia("(max-width: 600px)")
x.addEventListener("change", () => {
    myFunction(x);
});

和

 window.addEventListener('resize', ()=>{
 var x = window.matchMedia("(max-width: 600px)")
 if (x.matches) { // If media query matches 
  closeNav() 
 }
 });

我已經醒了好幾個小時了，我知道這可能是愚蠢的事情。

Answer 1

您可以使用 CSS @media-queries 而不是 JavaScript，例如：

@media only screen and (min-width:0px) and (max-width: 767px) { '你的風格' }

@media only screen and (min-width:768px) and (max-width: 1024px) and (orientation: portrait) { 'for tablet portrait view' }

@media only screen and (min-width:768px) and (max-width: 1024px) and (orientation: landscape) { 'tablet view landscape' }

另外請不要忘記在您的頁面部分添加視口元標記。

meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3"

（保留上面的元標記在 < /> 內）

視口元標記將讀取您的瀏覽器調整大小，您可以實現響應 web 布局，顯示和隱藏特定設備尺寸的元素等。