Which devices/recommended sizes should I target with mediaqueries?

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.