如何为响应式布局同步 CSS 和 JavaScript？（变量和@media）答案

【问题标题】：How can I sync CSS and JavaScript for a responsive layout? (Vars and @media)如何为响应式布局同步 CSS 和 JavaScript？（变量和@media）
【发布时间】：2020-02-08 00:18:58
【问题描述】：

我使用 JQuery 和 CSS 为 Web 应用程序创建了一个菜单。这基本上包括四种状态：隐藏（移动）、最小化（桌面）、小（桌面）和大（移动）。

在重新加载网页时，无论用户激活还是停用菜单，都会初始化一个 cookie（它是 PHP）。

问题是如果浏览器被调整大小，CSS 会删除菜单（显示：无）。 JQuery 当然不知道这种情况，因为我不会在运行时更改变量（cookies）。

那么，我如何才能真正同步 JavaScript 和 CSS？还是我应该只选择一种语言？这是一些代码。感谢您遇到的一些问题，我非常感谢解决此问题的好方法！

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

【问题讨论】：

听起来您需要在窗口中调整大小事件处理程序中的逻辑来重新评估您的 cookie 或在页面加载时评估的任何内容

标签： javascript jquery html css responsive-design

【解决方案1】：

在您的 JQuery 脚本中，在执行您尝试执行的任何操作之前，请检查该元素是否隐藏或页面缩小时发生的其他任何情况。

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

【讨论】：

谢谢。当用户缩小页面时（这是一个过程），元素 nav .main-menu 实际显示，当他之前点击菜单栏时。这会使网格布局有点崩溃。

【解决方案2】：

所以我用下面的代码解决了这个问题：


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();
});

【讨论】：