Question

Let’s suppose I want to dynamically add CSS rules that are tied to a media condition. For example, something like following:

@media only screen and (min-device-width : 500px){
    .someClass: {
        color: blue;
    }
}

A logical step would be to use JavaScript to check the validity of the media query and insert the rule if the test passes. Something like following:

if(matchMedia(only screen and (min-device-width : 500px))){
    $('.someClass').css('color', 'blue');
}

The drawback being that the rule would NOT be responsive. If I change the screen size, the blue color will not change accordingly. I can add a listener to screen size changes but I think it’s a bit overkill.

My question is: is there a way to add a responsive rule via Javascript or JQuery?

Answer 1

You want to hear about enquire.js:

enquire.register("screen and (max-width:1000px)", {

    match : function() {},      // REQUIRED
                                // Triggered when the media query transitions 
                                // *from an unmatched state to a matched state*

    unmatch : function() {},    // OPTIONAL
                                // If supplied, triggered when the media query transitions 
                                // *from a matched state to an unmatched state*.

    setup : function() {},      // OPTIONAL
                                // If supplied, a one-time setup function 
                                // triggered when the handler is first registered.                           

    deferSetup : true,          // OPTIONAL, defaults to false
                                // If set to true, defers execution the setup function until
                                // the media query is first matched. Setup is still triggered just once.

    destroy : function() {}     //OPTIONAL
                                // If supplied, triggered when a hander is unregistered (covered later). 
                                // Enables you to provide lifecycle to responsive widgets. 
                                // Put cleanup logic here.

}).listen(); // More on this next

[from the docs]

EDIT: if you want to add a pure CSS rule via js [without relying on a listener], I think it is not possible.