Bdtjtk

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.

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?

@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)  {



  }

While this can get opinionated, I define my breakpoints per website design and not based on some fixed widths for specific devices.

Here's my basic workflow:

1. Create the website layout for either desktop or mobile first.


2. Start to increase or decrease your width depending on your first design and find key points where your design breaks and looks bad.


3. Group these points into common breakpoints to decrease the overall number of breakpoints (e.g. if something breaks at 850 and another think at 900 I look if I could change them at the same breakpoint.


4. Avoid going for minor things that don't change the overall picture. They can be amended later. This is something that comes with experience because it's hard to know beforehand whether something is minor or will have profound effects on the overall layout. So it doesn't matter if you don't consider this point in your first projects.

When working desktop-first, I don't design for huge desktops and just incorporate them later when I create my breakpoints, but that's a preference.

BTW, don't use pixel units in your media queries, or anywhere else for that matter, except for very small numbers like border-radius. This can save you a lot of future headache and redundant work.