Imagine needing to dynamically include CSS rules that correspond to a specific media condition. Take, for instance, the scenario below:
@media only screen and (min-device-width : 500px){
.someClass: {
color: blue;
}
}
An obvious solution would involve using JavaScript to validate the media query and inject the rule if the test is successful. Consider this approach:
if(matchMedia(only screen and (min-device-width : 500px))){
$('.someClass').css('color', 'blue');
}
Unfortunately, the downside of this method is that the rule isn't responsive. Any changes in screen size won't automatically update the blue color. While you could add a listener for screen size adjustments, it may be unnecessary.
Therefore, my inquiry is this: Is there a way to insert a responsive rule via JavaScript or JQuery?