title: How to combine max-width, min-width in matchMedia query?
body: <p>I am working with the <a href="https://developer.mozilla.org/nl/docs/Web/API/Window/matchMedia" rel="nofollow noreferrer">matchMedia</a> API to determine viewports within javascript, so I can minimize the amount of dom manipulation taking place. </p>
  
  <p>Instead of using <code>display: none</code> everywhere I determine if elements are inserted into the DOM or not with a <code>v-if</code> directive from Vue.</p>
  
  <p>I have set it up like this:</p>
  
  <pre><code>resize() {
      this.mobile = window.matchMedia('(max-width: 767px)').matches;
      this.tablet = window.matchMedia('(max-width: 767px)').matches;
      this.desktop = window.matchMedia('(min-width: 992px)').matches;
  }
  </code></pre>
  
  <p>The mobile matchmedia query is fine but how do I determine exactly what is tablet size? I am wondering if I can combine <code>max-width</code> and <code>min-width</code> values within the matchMedia query.</p>
  
  <p>Of course I could do something like this:</p>
  
  <pre><code>resize() {
      this.mobile = window.matchMedia('(max-width: 767px)').matches;
      this.desktop = window.matchMedia('(min-width: 992px)').matches;
      this.tablet = !this.mobile &amp;&amp; !this.desktop;
  }
  </code></pre>
  
  <p>I am wondering is this is properly set up like this though.</p>