O'Reilly logo

Responsive Web Design with HTML5 and CSS3 Essentials by Asoj Talesra, Gaurav Gupta, Alex Libby

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required