Помогите, пожалуйста, никак не могу сообразить, что не так. Точнее, есть некоторые подозрения, что не так, но как сделать правильно, не догоняю.
Есть код, который при увеличении разрешения до 1024px выдергивает панель поиска из сворачивающегося меню и размещает в видимой части панели навигации:
function monitors(mediaQuery1, mediaQuery2, mediaQuery3, mediaQuery4) {
var panel = document.getElementsByTagName("form"); // получаем блок с панелью поиска
var subMenu = document.getElementsByClassName("submenu"); // перед этим элементом необходимо будет вставить панель поиска
var parent = document.getElementById("accordion"); // родитель обоих элементов
if (mediaQuery1.matches) {
// при ширине 1024 добавляем панели css-свойства и вставляем перед элементом subMenu
panel[0].style.cssText = "margin: 8px 1.5rem 0 0; \ width: 60vw; \ position: relative; \ float: right; \ display: inline-block; \ ";
parent.insertBefore(panel[0], subMenu[0].parentNode);
} else if (mediaQuery2.matches) {
// при ширине 1280...
panel[0].style.cssText = "margin: 10px 10rem 0 0; \ width: 40vw; \ position: relative; \ float: right; \ display: inline-block; \ ";
parent.insertBefore(panel[0], subMenu[0].parentNode);
} else if (mediaQuery3.matches) {
// при ширине 1536...
panel[0].style.cssText = "margin: 12px 10rem 0 0; \ width: 40vw; \ position: relative; \ float: right; \ display: inline-block; \ ";
parent.insertBefore(panel[0], subMenu[0].parentNode);
} else if (mediaQuery4.matches) {
// при ширине 1920...
panel[0].style.cssText = "margin: 20px 10rem 0 0; \ width: 70vw; \ position: relative; \ float: right; \ display: inline-block; \ ";
parent.insertBefore(panel[0], subMenu[0].parentNode);
}
}
smallDesktop = window.matchMedia("screen and (min-width: 1024px)");
notebook = window.matchMedia("screen and (min-width: 1280px)");
medium = window.matchMedia("screen and (min-width: 1536px)");
large = window.matchMedia("screen and (min-width: 1920px)");
monitors(smallDesktop, notebook, medium, large);
И вот оно чёт как-т не работает). Срабатывает только первый if с mediaQuery1.matches. Все остальные параметры функции в консоли = undefined. Что я делаю не так?
Заранее спасибо.
