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 apply to any device that was small enough to satisfy the *-device-width dimensions given. This is not what we want (or intended); to set a cleaner division between mobile devices and desktops, we can adapt...