根據窗口大小更改功能

Question

我具有以下功能來控制網站元素的高度和邊距

JS

function openNav() {
document.getElementById("mySidenav").style.height = "70vh";
document.getElementById("main").style.marginTop = "70vh";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

我想在style.height線和style.marginTop更改為20vh在屏幕上70vh移動

嘗試應用if ($(window).width() > 768)失敗

編輯：根據答復，我意識到我缺少重要信息。 該函數由onclick事件調用（（未單擊或第二次單擊時有所不同）），這就是樣式在javascript中的原因。

Answer 1

盡管您可以使用javascript（簽出matchmedia）來執行此操作-這是一個簡單的媒體查詢，用於根據視口寬度設置高度

下面根據視口寬度（基於Bootstrap 3的斷點）設置垂直高度-您可能要更改斷點-但最好使用CSS而不是javascript來設置樣式規則聲明。

@media (max-width: 767px) {
  #mySidenav {height: 20vh}
  #main {margin-top: 20vh}
}

@media (min-width: 768px) {
  #mySidenav {height: 70vh}
  #main {margin-top: 70vh}
}

如果您確實，絕對，絕對地想要使用javascript，則window.matchmedia是您的朋友（但可能不完全兼容跨瀏覽器）

if (window.matchMedia("(max-width: 767px)").matches) {
  /* The viewport is equal to or less than 767 pixels wide */
      #mySidenav {height: 20vh};
      #main {margin-top: 20vh}
} else {
  /* The viewport is more than 767 pixels wide */
      #mySidenav {height: 70vh};
      #main {margin-top: 70vh}
}

但是我強烈建議為此使用CSS。

Answer 2

我強烈建議對此類問題使用媒體查詢 。 這是一個工作示例：

 #main, #mySidenav { height: 20vh; } @media screen and (max-width: 768px) { #main, #mySidenav { height: 70vh; } } /*** JUST FOR DEMO ***/ #main, #mySidenav { background-color: red; margin-bottom: 20px; } 

 <div id="main"></div> <div id="mySidenav"></div>