title: What Are The Best Width Ranges for Media Queries
body: <p>What are the best width ranges for detecting media queries in a responsive design?</p>
  
  <p>I would like to cover all Desktop/Laptop monitors( with one orientation) in 4 media queries but I do not know if it is possible for example: small monitors, medium monitors, large and extra large monitors.</p>
  
  <p>For example in this code</p>
  
  <pre><code>/* Desktops and laptops ----------- */
   @media only screen and (min-width : 1224px) {}
  
  /* Large screens ----------- */
   @media only screen and (min-width : 1824px) {}
  </code></pre>
  
  <p>I think we need still to device the Desktops and laptops media into three sub media as small (like 13" to 14 laptops), medium (like 15 to 17) and large (over 22#). I know that the browser resolution is different than screen resolutions but let's say we have browsers in full-screen mode in all formats.</p>