title: Why does device-width work on desktop browser?
body: <p>I thought <code>device-width</code> only worked on tablets and other mobile devices until today.
  (Or maybe I was just wrong for a long time...)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.test {
      width: 100px;
      height: 100px;
      padding: 5%;
  }
  
  @media only screen and (max-width : 1900px) {
      .test { 
          background: blue;
          color: yellow;
      }
  }
  
  @media screen and (min-device-width : 768px) and (max-device-width : 1024px) {
      .test { 
          background: #000000; 
          color: #ffffff;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="test"&gt; TEST&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If I set my monitor resolution as the width 1024x768, the media query below will work.</p>
  
  <pre><code>@media screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  /*...*/
  }
  </code></pre>
  
  <p>How can I target tablet and mobile with media queries since <code>device-width</code> can work in desktop browsers?</p>