Which devices/recommended sizes should I target with mediaqueries? - css

Question

I am new to responsive web design, and got confused because there are various preferences about which media queries to use and which devices to target. Is there a standard? I'd like to target iPhone, iPads, and other popular devices.
I have found this on the web:
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 and high pixel ratio devices ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
But I do not know if it is outdated. I do not know which rule targets iPhone 4, because I ran the iPhone simulator and the CSS didn't work (referring to last CSS rule).

Answer 1

My thought with media queries is that your goal should be to make a device-agnostic framework for your website. That means it needs to be both resolution and pixel density aware, given Apple's (and others) push into super high resolution screens.
2018 update: my approach now drops the screen and min-device-pixel-ratio media attributes and uses screen-size ranges. Because every device now registers as screen, and almost all of them are high resolution now - you really don't need those attributes. If you're on a super high traffic site maybe they still make sense though.
Here is how I lay out my breakpoints globally:
/* Below 380px is really just the iPhone SE at this point */
#media (min-width: 380px) and (max-width: 480px) {
/* Most phones fall in here - iPhone, Galaxy, Pixel, etc */
}
#media (min-width: 480px) and (max-width: 768px) {
/* Phablets and Tablets - iPad, Galaxy Note, Pixel Slate, Fire */
}
#media (min-width: 768px) and (max-width: 980px) {
/* Small desktop, large tablet - Macbooks, sub 12" ultrabooks */
}
#media (min-width: 980px) and (max-width: 1200px) {
/* Medium screen desktop (up to about 24") and laptops (13" laptops) */
}
#media (min-width: 1200px) and (max-width: 1600px) {
/* Large screen desktop (27"), laptops (15+") */
}
#media (min-width: 1600px) {
/* Very large screen, 4K desktop + small TVs */
}
2012 advice: I've seen on achieving that dual mandate comes from Chris Coyier's CSS-tricks.com:
http://css-tricks.com/snippets/css/retina-display-media-query/
The concept is to create the initial break points based on size and then have pixel-density media queries follow. This approach gives you three breakpoints, and each breakpoint has a pixel-density-aware option.
Here is Coyier's sample code (I simplified out the vendor-specific prefixes so you can grasp the concept):
#media only screen and (min-width: 320px) {
/* Small screen, non-retina */
}
#media only screen and (min-device-pixel-ratio: 2) and (min-width: 320px) {
/* Small screen, retina, stuff to override above media query */
}
#media only screen and (min-width: 700px) {
/* Medium screen, non-retina */
}
#media only screen and (min-device-pixel-ratio: 2) and (min-width: 700px) {
/* Medium screen, retina, stuff to override above media query */
}
#media only screen and (min-width: 1300px) {
/* Large screen, non-retina */
}
#media only screen and (min-device-pixel-ratio: 2) and (min-width: 1300px){
/* Large screen, retina, stuff to override above media query */
}
I really like this concept: you save bandwidth for older, likely bandwidth constrained devices while giving the new, high-res devices what they need. The only code you would have to put in the pixel-density media queries should be background-image stuff, so the higher-res imagery overrides its pixelated counterpart on older devices.
Realize that you are trying to hit a moving target my friend ;) This is an evolving concept, css-tricks.com, stackoverflow and other blogs seem to be the best way to keep up. Good luck.

Answer 2

The "breakpoints" in your layout are likely to become quickly outdated as new devices with different viewport ratios come on the market. Perhaps rather than target specific devices, I prefer the approach of having breakpoints in your design where you want it to break, rather than bending your design to specific devices.
This article: Device-Agnostic Approach To Responsive Web Design explains it better than I could ever do.
Alternatively, you could refer to some of the most popular frameworks like 320 and Up or Twitter Bootstrap - they are updated very often and should provide you with a good starting point with media query breakpoints.