Skip to content

Media Queries for Common Device Breakpoints

The @ media query is 1/3 of the recipe for responsive design, which has been a large topic of discussion with the recent announcement that Google will be making this a ranking factor for mobile searches. It is the key ingredient that, in it’s simplest for allows for specified CSS to be applied depending on the device and whether it matches the media query criteria. The problem with having many media queries is that if you are building for a specific device, what happens when the newer version comes out and people upgrade? Well, then you need to rebuild the website’s CSS/style sheet and again, your in the exact same place you were in prior to the latest released device. To resolve this we use three standards in which you can take and use as a template… The most popular screen widths for a phone are between 0 and 767px, ipads and tablets come in after than starting at 768px and some tablets go all the way up to 979px, then you have a screen large enough for regular website formatting… this is where people tend to start their development and scale it down to fit phones and tablets… I don’t agree with this mentality, I’m in the boat where you develop for the majority of users for the website (you can get this information from popular tracking information like Google Analytics). Here is the information you’re probably actually looking for…just place this at the end of your existing CSS stylesheet and you’ll be able to start making your website responsive.

/* Begin Responsive Changes */
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 767px) {
/* Place your styles for phones and small tablets here */

}
/* Tablets (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 979px) {
/* Place your styles for tablets and tiny laptops here */

}
/* the reason that this stops at 979px in width, is that at 980px your default styles w

Leave a Comment





This site uses Akismet to reduce spam. Learn how your comment data is processed.