title: What are standard breakpoints for @media queries in CSS?
body: <p>So I'm sifting through many different @media queries for all of the different commonly used devices of today however I find that if I try and cater for everyone in this way I'll end up with half my code being @media queries.</p>
  
  <p>Are there any standardized @media queries that will allow me to cater for the masses in three @media queries? One for Mobiles, One for Tablet, One for Desktops/Laptops?</p>
  
  <pre><code>@media only screen /* iPhone 6, 6S, 7 and 8 */
    and (min-device-width: 375px) 
    and (max-device-width: 667px) 
    and (-webkit-min-device-pixel-ratio: 2)  {
  
    }
  
  @media only screen /* iPhone 6+, 7+ and 8+ */
    and (min-device-width: 414px) 
    and (max-device-width: 736px) 
    and (-webkit-min-device-pixel-ratio: 3)  {
  
    }
  
  @media only screen /* iPad 3, 4 and Pro 9.7 */
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (-webkit-min-device-pixel-ratio: 2)  {
  
    }
  
  @media screen /* Non-Retina Desktop/Laptop */
    and (min-device-width: 1200px) 
    and (max-device-width: 1600px) 
    and (-webkit-min-device-pixel-ratio: 1)  {
  
    }
  </code></pre>