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.

Tablet and PC Monitor Display Sizes(Data by W3C, Jan 2017)

Screen Width Screen Minimal Height Statistics
768px (Tablet) 1024 px(Tablet)
Lower Lower 4.4.00%
1024 px 768 px 3.00%
1280 px 1024 px 5.00%
1280 px 800 px 4.00%
1366 px 768 px 35.00%
1920 px 1080 px 17.00%
2560 px and up 1440 px 31.60%

Smartphone Display Sizes(Data by DeviceAtlas, 2016)

Smartphone Screen Resolution
Nokia 230, Nokia 215, Samsung Xcover 550, LG G350 240 x 320
Alcatel pixi 3, LG Wine Smart 320 x 480
Samsung Galaxy J1 (2016), Samsung Z1, Samsung Z2, Lumia 435, Alcatel Pixi 4, LG Joy, ZTE Blade G 480 x 800
Huawei Y635, Nokia Lumia 635, Sony Xperia E3 480 x 854
Samsung Galaxy J2, Moto E 2nd Gen, Sony Xperia E4, HTC Desire 526 540 x 960
iPhone 4, iPhone 4S 640 x 960
iPhone 5, iPhone 5S, iPhone 5C, iPhone SE 640 x 1136
Samsung Galaxy J5, Samsung Galaxy J3, Moto G4 Play, Xiaomi Redmi 3, Moto G 3rd Gen, Sony Xperia M4 Aqua 720 x 1280
iPhone 6, iPhone 6S, iPhone 7 750 x 1334
iPhone 6S Plus, iPhone 6 Plus, iPhone 7 Plus, Huawei P9, Sony Xperia Z5, Samsung Galaxy A5, Samsung Galaxy A7, Samsung Galaxy S5, Samsung Galaxy A9, HTC One M9, Sony Xperia M5 1080 x 1920
Samsung Galaxy Note 5, Samsung Galaxy S6, Huawei Nexus 6P, LG G5 1440 x 2560
Sony Xperia Z5 Premium 2160 x 3840
General design values with Photoshop:
750 x 1334,1080 x 1920

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


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


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.

Published by UIUX Lab

Hi. I'm a full-stack designer. Focus on UI, UX, awesome websites, front-end and WordPress development. I want to build things I can be proud of.