Javascript 根据窗口大小更改函数

我有以下功能控制我的网站元素的高度和边距

js

我想将

style.height

行和

style.marginTop

更改为屏幕上的

20vh

和手机上的

70vh

尝试应用

if（$（window）.width（）>768）

但未成功

---

编辑：根据回复，我意识到我遗漏了重要信息。该函数由onclick事件调用（未单击或第二次单击时会有所不同），这就是javascript中存在样式的原因。

虽然您可以使用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是您的朋友（但可能不完全兼容跨浏览器）

---

但我强烈建议使用CSS来实现这一点。我强烈建议使用CSS来实现类似的功能。以下是一个工作示例：

#main，
#mySidenav{
高度：20vh；
}
@媒体屏幕和屏幕（最大宽度：768px）{
#主要的，
#mySidenav{
高度：70vh；
}
}
/***只是为了演示***/
#主要的，
#mySidenav{
背景色：红色；
边缘底部：20px；
}

感谢您的回复，我已经更新了我的问题，因为我意识到它的措辞，简单的css会起作用。感谢您的回复，我已经更新了我的问题，因为我意识到它的措辞，简单的css会起作用。@user3550879-即使有了新的信息-这也应该用css来完成-在javascript中可以做的是向页面结构添加/删除类以提供不同的样式。这意味着您正在使用javascript添加类，该类的css仍然存在于css中。最好不要将js和csseven与新信息混合在一起-这应该通过CSS来完成-在javascript中可以做的是向页面结构添加/删除类以提供不同的样式。这意味着您正在使用javascript添加类，该类的css仍然存在于css中。最好不要混合使用js和css

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

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

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