How to change a css class property value for a specific mediaquery?

Question

I have the class

.foo {
  width: 30px;
}
@media only screen and (max-width:768px){
   .foo {
     width: 20px;
   }
}

And I want to change the value of width from 20px to 15px with javascript for the mediaquery only. When I do it, it changes the class for all resolution discounting the mediaquery in the CSS.

Answer 1

You can try this:

if (window.matchMedia("(max-width: 768px)").matches) {
  document.querySelector('.foo').style.width = "15px";
}