title: Is there a javascript equivalent to using @media query?
body: <p>I have this code:</p>
  
  <pre><code>@media screen and (max-width: 570px) {
  
      #header {
          .flex-wrap(wrap);
          .justify-content(center);
  
          #headerTitles {
              margin-top: 1rem;
          }
  
      }
  }
  
  @media screen and (min-width: 571px) and (max-width: 950px) {
  
      #header.authenticated {
          .flex-wrap(wrap);
          .justify-content(center);
  
          #headerTitles {
              margin-top: 2rem;
          }
      }
  
  }
  </code></pre>
  
  <p>Is there a way that I can use Javascript (not jQuery) to dynamically add or remove a class to the  to represent the two different sizes and then recode this something like:</p>
  
  <pre><code>.small #headerTitles { margin-top: 1rem; }
  .large #headerTitles { margin-top: 2rem; }
  </code></pre>
  
  <p>If this works then can someone comment as to if using Javascript is a better way to do this?</p>