Responsive Web Design Breakpoints

First of all you need to add the following meta tag within the head section which sets the viewport to the device display width:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

When you write the media queries you can write them based on the device width, screen orientation, and the actual screen width in px. After some experimentation, I found the best way to do it is based on the screen width.

Mobiles First Approach: 480px and lower

At this point we don’t need any media queries and we should write the base CSS for small resolutions first. That way we can support older mobile phones which don’t recognize media queries. We will also save time as coding goes faster this way (it’s easier to add new CSS on top instead of having to re-write rules to adjust for smaller resolutions).

/*--------------------------------------------*/
/* MOBILES FIRST APPROACH: MAJOR BREAKPOINT 480px and lower (320px recommended layout size)*/
/*--------------------------------------------*/
.main-wrap {
  width: 320px;
}

Smarthphone Zone: between 480px-640px

At this breakpoint, if the design allows, I recommend making the main wrap fluid. I have set it to 90% so it can have some spacing from the border.

/*--------------------------------------------*/
/* Smarthphone Zone: Small BREAKPOINT - 480px-640px (fluid website wrapper) */
/*--------------------------------------------*/
@media screen and (min-width: 480px) {
  .main-wrap {
    width: 90%;
  }
}

Tablets Zone: between 640px-768px

/*--------------------------------------------*/
/* Tablets Zone:- 640px-768px (fluid website wrapper) */
/*--------------------------------------------*/
@media screen and (min-width: 640px) {
  .main-wrap {
    width: 100%;
  }
}

Desktop or larger resolutions: 890px and above

At the desktop or larger resolutions breakpoint we need to set a max width for the layout and we are good to go.

/*--------------------------------------------*/
/* Desktop: > 890px */
/*--------------------------------------------*/
@media only screen and (min-width: 890px) {
  .main-wrap {
    overflow: visible;
    max-width: 960px;
  }
}

In the end you can use as many breakpoints as needed depending on the design or the content.

Useful resources

Tagged