如何同步 CSS 和 JavaScript 以获得响应式布局？ （变量和@media）

Question

I created a menu for a web application using JQuery and CSS. This consists basically of four states: Hidden (mobile), minimzed (desktop), little (desktop) and big (mobile).

A cookie is initiliazed whether the user activated or deactivated the menu when reloading the web page (it's PHP).

The problem is that if the browser is resized, CSS deletes the menu (display: none). JQuery is of course not aware of this circumstance, because I do not change the variables (cookies) during the runtime.

So, how can I actually sync JavaScript and CSS? Or should I go only for one language? Here's some code. Thanks for some problem I'd really appreciate a good way to solve this issue!

JavaScript

/* ____________ PRE-LOADING USER-SETTINGS & COOKIE HANDLING ___________ */

$(document).ready(function(){
    if (Cookies.get('menuToggled') == '1') {
        if (isMobileDevice()) {
            $('.grid-main').css('grid-template-columns', ""); // "" resets to default
            Cookies.set('menuToggled', '0');
            // I do this because after every initial load, the menu must be closed in mobile view.
        }
        else {
            $('.grid-main').css('grid-template-columns', ""); // "" resets to default
        }
    }
    else {
        if (isMobileDevice()) {
            $('.grid-main').toggleClass("closedMenu");
            $('.main-menu').css("display", "none");

        }
        else {
            $('.grid-main').toggleClass("smallMenu");
            $('nav span').css("display", "none");
        }
    }
});

/* ######################################################### */
/* ##################### DOM FUNCTIONS ##################### */
/* ######################################################### */

/* Menu Toggler */

$(document).ready(function() { 

$( "a.header-burger-menu" ).click(function() {

    $('.grid-main').attr('class', 'grid-main'); // Resets all sub-classes
    $('.grid-main').css('grid-template-columns', ""); // "" Resets to default value 
    $('.main-menu').css("display", "flex");

    if (Cookies.get('menuToggled') == '1') {
        if (isMobileDevice()) {
            $('.grid-main').toggleClass("closedMenu");
            $('.main-menu').css("display", "none");

        }
        else {
            $('.grid-main').toggleClass("smallMenu");
        }

        $('nav span.mobileHandler').css('display', 'none');
        Cookies.set('menuToggled', '0');
    }
    else {
        if (isMobileDevice()) {
            $('.grid-main').toggleClass("bigMenu");
            $('.main-menu').css("display", "flex");
        }
        else {
            $('.grid-main').attr('class', 'grid-main'); // Resets all sub-classes
            $('.grid-main').css('grid-template-columns', ""); // "" resets to default value 
        }

        $('nav span.mobileHandler').css('display', 'block');
        Cookies.set('menuToggled', '1');
      }
});

CSS

/* ################################################# */
/* ############### MOBILE SECTION ################## */
/* ################################################# */

/* CSS - MENU TOGGLER for JQUERY */

.grid-main.smallMenu { 
  /* No empty space between the classes to refer "smallMenu" to "grid-main" */
  grid-template-columns: 80px 1fr 1fr !important;
}

.grid-main.bigMenu {
  grid-template-columns: 100% 0fr 0fr;
}

.grid-main.closedMenu {
  grid-template-columns: 0px 1fr 1fr;
}

@media(max-width: 576px) {

  header h1 {font-size: 2rem;}

  header .header-chat {
    width: 50px;
  }

  header .header-login {
    width: 50px;
  }

  .grid-main {
    font-size: .7rem; 
    grid-template-columns: 0px 1fr 1fr;
    grid-template-rows: 0.1fr 1fr 0.08fr;
  }

  nav .main-menu {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left; /* Horizontal pseudo centering */
    align-content: flex-start; /* Vertical pseudo centering */
    justify-items: center;
    margin: 40px 10px 0px 10px;
    overflow-y: overlay;
  }

  nav .main-menu.mobileHandler {
    display: none;
  }

  nav span.mobileHandler {
    display: none;
    /* To hide nav textes in closed or small view, only icons */
  }   

Answer 1

In your JQuery script, before performing whatever action it is you are trying to do, check to see if the element is hidden or whatever else it is that occurs when the page is shrunk.

if($('.element').css('display')=='none'){
    //Do what you gotta do in here
}

Answer 2

So I solved the issue with the following code:

function MainMenu() {
    if (Cookies.get('menuToggled') == '1') {
        if (isMobileDevice()) {
            $('.grid-main').css('grid-template-columns', ""); // "" resets to default
            Cookies.set('menuToggled', '0');
            // I do this because after every initial load, the menu must be closed in mobile view.
        }
        else {
            $('.grid-main').css('grid-template-columns', ""); // "" resets to default
        }
    }
    else {
        if (isMobileDevice()) {
            $('.grid-main').toggleClass("closedMenu");
            $('.main-menu').css("display", "none");

        }
        else {
            $('.grid-main').toggleClass("smallMenu");
            $('nav span').css("display", "none");
        }
      }
    }

/* _________________ PRE-LOADING USER-SETTINGS & COOKIE HANDLING __________________ */

$(document).ready(function(){
    MainMenu();
});

/* ######################################################### */
/* ##################### DOM FUNCTIONS ##################### */
/* ######################################################### */

$( window ).resize(function() {
    MainMenu();
});