切换响应式CSS代码

Question

So in my script I am working on I have MANY various options the user can set VIA variables. 所以在我的脚本中，我有很多选择，用户可以设置VIA变量。 Now one of my variables is cfs_responsive and I have a JavaScript if condition checking for true/false or 1/2 values as well as if the actual variable is set. 现在，我的变量之一是cfs_sensitive，如果条件检查是否为true / false或1/2值以及是否设置了实际变量，则我有一个JavaScript。 Now where I am stuck is here. 现在我被困在这里。 Once I get the condition written correctly how am I supposed to turn on and off the responsive css code? 一旦正确编写条件，应该如何打开和关闭响应式CSS代码？

My responsive css code is the following. 我的响应式CSS代码如下。

/* ===RESPONSIVE=== */
    /* CSS DIRECTORY
        1. =primaryCATEGORY
        2. =subCATEGORY
        3. =lowerCONTENT
    */
    @media all and (max-width: 1000px) {
        /* ===primaryCATEGORY=== */
            /* Single Primary Category Divider */
            .cfs_primaryCategory {
                margin-left: 0px;
                position: absolute;
            }
            .cfs_primaryCategory h1 {
                visibility: hidden;
            }
            .cfs_primaryCategory.cfs_primaryCategory-active h1 {
                visibility: visible;
            }
            .cfs_primaryCategory.cfs_primaryCategory-active {position: relative;z-index: 999;}
        /* ===subCATEGORY=== */
            /* Single Sub Category Divider */
            .cfs_subCategory {
                margin-left: 0px;
                position: absolute;
            }
            .cfs_subCategory.cfs_subCategory-active {position: relative;z-index: 999;}
        /* ===lowerCONTENT=== */
            /* Lower Content Wrapper */
            .cfs_lowerContent-wrapper {
                padding: 25px 35px 0px 35px;
                max-width: 450px;
            }
    }

Would the only way of doing this be seperating the stylesheet into two different stylesheets then having the js within the if statement include the stylesheet if true? 这样做的唯一方法是将样式表分为两个不同的样式表，然后在if语句中包含js的样式表包含true吗？

I would really Like to keep the stylesheet all together. 我真的很想把样式表放在一起。

Let me know what you think. 让我知道你的想法。

Huge thanks in advance! 提前非常感谢！

Answer 1

Your idea to keep it as a separate stylesheet and add/remove it from the page is sound. 将其保留为单独的样式表并从页面添加/删除它的想法很合理。

The only other option I can think of is to add/remove a class on body or another parent element, eg <body class="responsive"> and use that in the CSS: 我唯一想到的另一种选择是在body或另一个父元素上添加/删除一个类，例如<body class="responsive"> ，然后在CSS中使用它：

body.responsive .cfs_primaryCategory {...}

JQ JQ

$('body').toggleClass('responsive');
// or $('body').addClass('responsive');
// and $('body').removeClass('responsive');

切换响应式CSS代码

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-12-24 02:24:05

切换响应式CSS代码

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-12-24 02:24:05

解决方案1
0 已采纳 2013-12-24 02:24:05