Below is just a template for some basic breaks for responsive web development. I find that tossing this into my style sheet is a huge help, and that is why I wanted to put it up.
I will be updating this from time to time just for any updates I run across. I have to say that though these start at 769px it is worth pointing out that having a large media query can also be beneficial when developing if you know your audience. After you get some data on the people coming to the site, or if you do keyword research and find that people in that particular area look at sites like the one your are building on say a tablet instead of desktop, or even if you have Mac users over Windows.
Those specifics can come in handy when wanting to produce the very best experience.
/*ALL MOBILE STYLES BELOW*/
/*desktop*/
@media only screen and (min-width: 769px) {
body {
background-color: lightblue;
}
}
/*Tablet*/
@media only screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
/*Phone*/
@media only screen and (max-width: 400px) {
body {
background-color: lightblue;
}
}
/*Other*/
@media only screen and (max-width: /*add here*/) {
}