Responsive Web Design with HTML5 and CSS3 Essentials

Identifying common breakpoints

In an age of responsive design, breakpoints are key to a successful site; it's all about defining where our design might break, if we were to resize the available screen width. It is important to understand that no two sites will have identical queries in use; this said, there are some we can use that can be used as a basis for our designs.

We'll start with this one, for standard desktops:

@media only screen and (max-width: 768px){ 
  /* CSS Styles */ 
} 

With the meteoric rise in mobiles, we can't forget those who are fortunate enough to own a smartphone, such as an iPhone:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { 
  /* Styles */ 
} 

The downside of this query means that it would equally ...