根据窗口大小更改功能

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>