The Most Used Responsive Breakpoints in 2017 Of Mine

I believe many web designers still have many confusion for the responsive design . Screen resolution? CSS3 Media Queries? Device width? Screen Sizes? And so on. The rapid development of web design and electronic devices in this years which must soon lead to increase an everexpanding workload. For a while you have to be compatible with the PC, Mobile, Andriod and IOS, and so on. However, the fact is true, the pure web interface design, we do not need to consider too complex response. Because the responsive design rely on front-end engineers. 🙁 But, we can not ignore this. If you are a team, you will be hacked by front-end developers.

Well, you can use Photoshop CC directly create a file with predefined document sizes of different devices, increased design accuracy.

Of course, if you do not use Photoshop, you can see the following tables.

Well, the core mind of this article came. Or the design is a small matter, the real thing is that front-end development how to make your design support the response which requires some various things. What I am paying attention to do:

• Improve the responsive design efficiency with front-end developer.
• Responsive web design breakpoints are an important aspect of the CSS declarations that allow for different layouts to appear at various screen sizes.
• Try as short as possible for your code.

The following code is mine (The following breakpoints are mainly used for self-made Style Sheets when using (or not) the corresponding responsive front-end framework.):

/* 
 * The Standard Breakpoints. Working with fluid images.
*/
@media all and (max-width: 1690px) { ... }
@media all and (max-width: 1280px) { ... }
@media all and (max-width: 980px) { ... }
@media all and (max-width: 736px) { ... }
@media all and (max-width: 480px) { ... }



/* 
 * The Standard Breakpoints. But possibly this is a slightly complicated situation.
*/
@media all and (min-width:1200px){ ... }
@media all and (min-width: 960px) and (max-width: 1199px) { ... }
@media all and (min-width: 768px) and (max-width: 959px) { ... }
@media all and (min-width: 480px) and (max-width: 767px){ ... }
@media all and (max-width: 599px) { ... }
@media all and (max-width: 479px) { ... }


/* 
 * The Standard Bootstrap 3.x Breakpoints
*/
@media all and (max-width: 991px) { ... }
@media all and (max-width: 768px) { ... }
@media all and (max-width: 480px) { ... }


/* 
 * The Standard Bootstrap 4.x Breakpoints
*/
@media all and (max-width: 1199px) { ... } 
@media all and (max-width: 991px) { ... } 
@media all and (max-width: 768px) { ... } 
@media all and (max-width: 575px) { ... }

/*   
* The Material Design Lite (MDL) Breakpoints 
*/
@media all and (max-width: 1024px) { ... } 
@media all and (max-width: 839px) { ... } 
@media all and (max-width: 480px) { ... }


/* 
 * Retina Breakpoints(@2x)
*/
@media(-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:3/2),(min-resolution:1.5dppx){ ... }
 

Again, disclaimers:

1. This is non-comprehensive
2. These are just loose personal habit
3. I’m just one dude

FAQ:

Why do I use max-width: 768px to be compatible with bootstrap3.x?
1. In order to facilitate the browser to debug because 768px is a common breakpoint. So it will not affect the official responsive display effect.
2. Try to reduce breakpoints as much as possible. I am used to starting from the PC, because the PC is often much more difficult to develop than the mobile.

These breakpoints are not necessarily the same as the official. Is there right or wrong?
Breakpoints are actually designed according to specific projects. There is no absolute right or wrong. I summarize them according to my habits and multiple project practices, and they are not necessarily consistent with official data.

Where are the examples of using the above breakpoint data?
For examples of our commonly used breakpoints, please checkout: https://github.com/xizon/uix-kit

Retina Issue

This is a common breakpoint on my usage rather than using official data, which retina can use: http://imulus.github.io/retinajs/ (Renina is mainly adapted on photos. ) Direct use of CSS will be more complicated, if you want, you can add some large container. Like this:

@media all and (min-width:1689px) { ... } 
@media all and (min-width: 960px) and (max-width: 1690px) { ... } 
...
 

Conclusion:

Using ordinary breakpoints to do the layout and using JS to control retina pictures. 🙂

You should take some time to ask yourself should I use a responsive framework for my site. I hope this article is helpful to you ：)

Thanks for your reading. Want more? Follow me.