title: Media Queries: How to target desktop, tablet, and mobile?
body: <p>I have been doing some research on media queries and I still don't quite understand how to target devices of certain sizes. </p>
  
  <p>I want to be able to target desktop, tablet and mobile. I know that there will be some discrepancies but it would be nice to have a generic system that can be used to target these devices. </p>
  
  <p>Some examples I have found:</p>
  
  <pre><code># Mobile
  only screen and (min-width: 480px)
  
  # Tablet
  only screen and (min-width: 768px) 
  
  # Desktop
  only screen and (min-width: 992px)
  
  # Huge
  only screen and (min-width: 1280px) 
  </code></pre>
  
  <p>Or:</p>
  
  <pre><code># Phone
  only screen and (max-width:320px)
  
  # Tablet
  only screen and (min-width:321px) and (max-width:768px)
  
  # Desktop
  only screen and (min-width:769px)
  </code></pre>
  
  <p>What should the breakpoints be for each device?</p>