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.):

a) 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) { ... }


b) 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) { ... }




c) The Standard Bootstrap 3.x Breakpoints

@media all and (max-width: 991px) { ... }
@media all and (max-width: 768px) { ... }
@media all and (max-width: 480px) { ... }

d) 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) { ... }

e) The Material Design Lite (MDL) Breakpoints

@media all and (max-width: 1024px) { ... }
@media all and (max-width: 839px) { ... }
@media all and (max-width: 480px) { ... }


f) 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){ ... }

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? Check out my website UIUX Lab