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

我强烈建议您将media queries用于此类操作。这是一个工作示例：

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

根据窗口大小更改功能

2 个答案: