I've started using "320 and up"'s widths which are as follows:
Note that they go from small to large not the other way around though. This is more in line with progressive enhancement and definitely preferred anyway: http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
http://stuffandnonsense.co.uk/projects/320andup/
// Default styling here
// Little larger screen
@media only screen and (min-width: 480px) {
}
// Pads and larger phones
@media only screen and (min-width: 600px) {
}
// Larger pads
@media only screen and (min-width: 768px) {
}
// Horizontal pads and laptops
@media only screen and (min-width: 992px) {
}
// Really large screens
@media only screen and (min-width: 1382px) {
}
// 2X size (iPhone 4 etc)
@media only screen and
(-webkit-min-device-pixel-ratio: 1.5), only screen and
(-o-min-device-pixel-ratio: 3/2), only screen and
(min-device-pixel-ratio: 1.5) {
}
If you use Sass, here's a little trick I've been using:
$laptop-size: "only screen and (min-width: 768px)";
$desktop-size: "only screen and (min-width: 1382px)";
// etc
And then
@media #{$laptop-size} {
// Styling here...
}
This way you can easily change widths in one place also you don't have to write the whole thing every time.
