Can I change the media query using javascript / jQuery?

Question

I have a style.css with a media query. In my javascript-file, I have a value for the desired mobile-width stored in a variable.

By changing the variable, I want to c

Answer 1

You can use Enquire.js jQuery plugin.

It is a JavaScript library for dealing with media queries in JavaScript.

This is quick start code sample:

enquire.register("screen and (max-width:45em)", {

    // OPTIONAL
    // If supplied, triggered when a media query matches.
    match : function() {},      

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

    // OPTIONAL
    // If supplied, triggered once, when the handler is registered.
    setup : function() {},    

    // OPTIONAL, defaults to false
    // If set to true, defers execution of the setup function 
    // until the first time the media query is matched
    deferSetup : true,

    // OPTIONAL
    // If supplied, triggered when handler is unregistered. 
    // Place cleanup code here
    destroy : function() {}

});

Answer 2

You also have to know that some of that approaches may not work correctly in Safari. Can not remember the problem so that you can find more information if you need it.

Answer 3

You can write by using $(window).width()

value=959;

if($(window).width() < value)
{
    $(".classname").css("color","white");
}

Answer 4

The best option would be to have two sets of media queries which are only applied based on a parent class being present.

@media (max-width: 600px) {

  .w600 .myDiv{
    color:red;
  }

}

@media (max-width: 400px) {

  .w400 .myDiv{
    color:red;
  }

}

You could then add/remove w600 or w400 to the body class to allow the required media query to work.

Using jQuery this could be done like:

$("body").addClass("w600")
         .removeClass("w400");

---

I appreciate you may have more than just one style and would therefore like to reduce code duplication.

In which case you could use a CSS transpiler such as Less with mixins:

@mediaqueryruleset:{
  .myDiv{
    color:red;
  }
  .myOtherDiv{
    color:blue;
  }
}

@media (max-width: 600px) {

  .w600 {
    @mediaqueryruleset();
  }

}

@media (max-width: 400px) {

  .w400 {
    @mediaqueryruleset();
  }

}

Which would output:

@media (max-width: 600px) {
  .w600 .myDiv {
    color: red;
  }
  .w600 .myOtherDiv {
    color: blue;
  }
}
@media (max-width: 400px) {
  .w400 .myDiv {
    color: red;
  }
  .w400 .myOtherDiv {
    color: blue;
  }
}

Answer 5

Okay, I think I have a solution that fits me. I outsource the media query into an additional style.css (style-mobile.css for example). This file is only loaded if the window-width is the variable value.

This solution fits me, but other may not find the answer for that problem here. Should I mark this answer as a solution anyway?

Answer 6

You can set the rule directly using .media.mediaText of document.styleSheets[0].cssRules

document.styleSheets[0].cssRules[0].media.mediaText = /* new media rule here */;

plnkr http://plnkr.co/edit/qzLO5J4KlWZLQnjMIy7i?p=preview