jQuery change media query width value

Question

Is it possible with jQuery or anything else to change width value of @media query css while page is running?

So for example if in style.css I've got

@media screen and (min-width: 400px) {
   /*whatever*/
}

to change it to 500px after website is loaded

I know this is an old thread but to respond to @jQuery00, I need to be able to adjust the min-width on different devices if more content has been added or removed. — Fuzz
– Fuzz, Commented Nov 7, 2014 at 8:58
This would be helpful for me too. I need to expand an iframe if there's a resize or rotation event. I could write it all in javascript, but changing one parameter in my @media query would be simpler, cleaner, more elegant. — Tony Brasunas
– Tony Brasunas, Commented Apr 23, 2015 at 17:05
plus to @TonyBrasunas point, graphics-intensive CSS is rendered on GPU, hence a much better performance than JS. — ierdna
– ierdna, Commented Oct 11, 2016 at 0:26

Rajiv007 · Accepted Answer · 2013-06-17 12:40:08Z

8

This is not possible through traditional method. You have to insert the full css through jQuery. For e.g :

 $('body').append("<style type='text/css'>@media screen and (min-width: 500px) { /*whatever*/ }</style>");

answered Jun 17, 2013 at 12:40

Rajiv007

1,1347 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1