Modernizr can do lots of things – one of them is the ability to mix media query function with jQuery functions. Although there are other ways to achieve this, even (or especially) within jQuery itself, if using Modernizr for some other things on your website, you can try something like the following:
|
1 2 3 4 5 |
$(document).ready(function() { if (Modernizr.mq("screen and (max-width:480px)")) { $("li").addClass("myClass"); } }); |
|
1 2 3 4 5 6 7 |
li { color: #FFF; } .myClass { color: #000; } |
and finally some HTML:
|
1 2 3 |
<ul> <li>CHANGE COLOR</li> </ul> |
If this piece of HTML is loaded on resolution below 480px, .myClass will be added.