изменение функции в зависимости от размера окна

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

Я бы настоятельно рекомендовал использовать медиа-запросы для чего-то подобного.Вот рабочий пример:

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

Answer 2

Хотя вы могли бы сделать это с помощью 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 для этого.