How to change responsive style with jQuery
I have a responsive style like:
@media all and (max-width:799px){
.bigFont{ font-size: 28px; }
}
@media all and (min-width:800px){
.bigFont{ font-size: 48px; }
}
If you are using jQuery to change the style like this:
$(.bigFont).css("font-size", "30px");
It will change the font size on both media.
My question is how can I change the font size of the bigFont for one of these using jQuery?
+1
source to share
1 answer
what you need to do is add another class
@media all and (max-width:799px){
.bigFont{ font-size: 28px; }
.bigFont30{ font-size: 30px; }
}
@media all and (min-width:800px){
.bigFont{ font-size: 48px; }
}
Jquery
$(.bigFont).addClass("bigFont30");
This will change the font size for the first media query only
Note. This will only work if you know what font you want to install before you put another $(window).width()
check
+2
source to share