Listener nasłuchujący mediaQueries breakpoint change

Bry ;)

Próbuję dodać do mojej strony żądanie odświeżenia, gdy Bootstrap osiągnie nowy Breakpoint. Jednak coś nie działa :(

function recalculateAllSiteAfterResize(event) {
    if (event.matches) {
        location.reload();
        alert("inside");
    }

    alert("outside");
}

function addLstnrs() {
    window.matchMedia("(max-width: 575px)").addEventListener("change", recalculateAllSiteAfterResize);
    window.matchMedia("(min-width: 576px)").addEventListener("change", recalculateAllSiteAfterResize);
    window.matchMedia("(min-width: 768px)").addEventListener("change", recalculateAllSiteAfterResize);
    window.matchMedia("(min-width: 992px)").addEventListener("change", recalculateAllSiteAfterResize);
    window.matchMedia("(min-width: 1200px)").addEventListener("change", recalculateAllSiteAfterResize);
    window.matchMedia("(min-width: 1400px)").addEventListener("change", recalculateAllSiteAfterResize);
}

addLstnrs();

Ale niestety nie działa :( Co robię źle? Podczas resize co prawda wywołuje się funkcja, ale nie wykonuje się if tylko alert("outside"); na zewnątrz :/, co ciekawe tylko na breakpointach

Dzięki
Michał

PS.

Ok, chyba już kumam, chodzi o to, że jak używa się addEv... i przypisuje się funkcję do eventa change to wykonuje on się tylko na zmianę, więc event.matches jest niepotrzebny.

Ale z innej beczki, jak przeliczyć ułożenie elementów, które są rozłożone na stronie, na podstawie przeliczeń js? Teraz jedyne wyjście, jakie znam, to reload. A jak ułożyć elementy po zmianie rozmiarów bez przeładowywania całej strony?

Mam teraz na górze strony taki kod:

var hs = [$("#el1").height(), $("#el2").height(), $("#el3").height()];

A po zmianie rozmiaru okna i załadowaniu breakpointa, te rozmiary są nie aktualne :/

PS2.

Tak sobie pomyślałem, że można by zachować reload tylko skorzystać z localStorage i zapisać ustawienia strony :P

Używanie location.reload nie jest najlepszym pomysłem, bo cała strona zaczyna wczytywać się od nowa.

Dużo lepszym rozwiązaniem byłoby przeniesienie obliczeń do osobnej funkcji i wywoływanie, gdy event.matches się zmieni.

function calculate() {
    /*
      tutaj dalsza część kodu
    */
}

function recalculateAllSiteAfterResize(event) {
  if (event.matches) {
    calculate(); // wywołujemy obliczenia przy zmianie breakpointa
  }
}

calculate(); // dodatkowo wywołujemy funkcję przy odpaleniu strony,  bo kod z matchMedia uruchamia się jedynie przy zmianie szerokości

const breakpointsList = [
   "(max-width: 575px)",
  "(max-width: 767px)",
  "(max-width: 991px)",
  "(max-width: 1199px)",
  "(max-width: 1399px)",
  "(min-width: 1400px)"
];

for (const breakpoint of breakpointsList) {
  matchMedia(breakpoint).addEventListener('change', recalculateAllSiteAfterResize);
}

@Xarviel: Dzięki. Problem polega na tym, że nie wiem jak wyliczyć wysokość elementu, jeżeli wyświetla się on nieprawidłowo. Chyba że tak, że załaduję stronę we wszystkich breakpointach i zapiszę na sztywno ich rozmiary, ale nie wiem, czy to coś da :/

PS. Jak wspomniałem, event.matches jest zbędny, to chyba pozostałość po starej konstrukcji.

Aktualizacja

Jednak się udało, teraz muszę tylko jeszcze dodać aktualizację rozmiaru przy mikroskopijnych wyświetlaczach, np. smartWatch :D