javascript - 根据窗口大小更改功能

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)- 这是一个基于视口(viewport)宽度设置高度的简单媒体查询

下面根据视口(viewport)宽度设置垂直高度(基于 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 是你的 friend (但可能不完全兼容跨浏览器)

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。