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?

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?

• javascript
• jquery
• css
• responsive-design
• media-queries

• Check if it helpful to you stackoverflow./questions/14068024/… – Rohan Kumar Commented Feb 8, 2013 at 10:55

2 Answers 2

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.

You can render dynamic css using responsive.js library. It helps you to define dinamically your responsive rules that will be rendered on client side as native css. It use a fluent interface programming style and it works also if media queries arent supported (dynamically render current valid rules).

For example you can define width property as :

r$.breakpoints(320,767,1280);
r$.set('width','px').values(100,300,1500).linearInt().applyTo('.class'); 

More information, download and examples at :

http://www.responsivejs.