html - 单击时应用媒体查询特定样式

Question

这是我的问题:

我在左侧有一个菜单。当屏幕太小时，菜单会占用太多空间，所以我将其“最小化”。为此，我在屏幕宽度小于特定像素大小时应用不同的样式。 (使用媒体查询)。

但我想允许用户使用按钮最小化菜单，即使在大屏幕上也是如此。这意味着应用与我的媒体查询中相同的样式。

我知道我可以通过单击按钮向容器中添加一个类，然后从该类的媒体查询中复制/粘贴代码，但我认为可能有比复制代码更好的方法来完成此操作。

现在:

 /* Classic style */
    #menu{
     width:100px;
     background-color:#ddd;
     padding:15px;
    }
    #menu li{
     color:red;
     padding:20px 20px;
    }

 /* Style when screen less than 600px */
    @media (max-width: 600px) {
     #menu{
      width:40px;
      padding:5px;
     }
     #menu li{
      padding: 10px 10px;
     }
     ...
     /* ...a lot more style... $/
    }

 /* Same style when class buttonClicked */
    .buttonClicked #menu{
     width:40px;
     padding:5px;
    }
    .buttonClicked #menu li{
     padding: 10px 10px;
    }
    ...
    /* ...a lot more style... $/

这只是一个简单的例子，但我在菜单上应用的样式比这复杂得多，所以我想尽可能避免重复代码。

这是一个 JsFiddle:https://jsfiddle.net/rtnp67s2/3/

编辑: 实际上，我正在寻找的是对样式进行代码重构。可能吗？

类似的东西(显然不起作用):

 /* Style when screen is less than 600px or when class .buttonClicked active */

    @media (max-width: 600px) OR .buttonClicked {
     #menu{
      width:40px;
      padding:5px;
     }
     #menu li{
      padding: 10px 10px;
     }
     /*... more than 100 lines of styling... */
    }

提前致谢!

Answer 1

另一种方法是删除媒体查询代码，并编写 jQuery 脚本，在 click 和 resize 事件上动态添加 .menuMinimized 类，或低于 $(window).width() 的设定值。

但是，这可能会在响应式开发中引发新问题。如果您已经添加了 Bootstrap 和 jQuery，那么 ~100 行重复代码的膨胀将是微不足道的。