Media Queries How to target desktop tablet and mobile

Question

I have been doing some research on media queries and I still don't quite understand how to target devices of certain sizes. I want to be able to target desktop, tablet and mobile. I know that there will be some discrepancies but it would be nice to have a generic system that can be used to target these devices.

Some examples I have found:

# Mobile 
only screen and (min-width: 480px) 

# Tablet 
only screen and (min-width: 768px)

# Desktop 
only screen and (min-width: 992px) 

# Huge 
only screen and (min-width: 1280px)

Or:

# Phone 
only screen and (max-width:320px) 

# Tablet 
only screen and (min-width:321px) and (max-width:768px) 

# Desktop 
only screen and (min-width:769px)

What should the breakpoints be for each device? Any help will be appreciated.

Answer 1

I would personally believe that these are the best breakpoints:

@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) /
}
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ } 
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ } 
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ } 
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ } 
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Edit: Refined to work better with 960 grids:
 

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ } 
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ } 
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ } 
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ } 
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ } 
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

In practice, many designers convert pixels to ems, largely because ems afford better zooming. At standard zoom 1em === 16px, multiply pixels by 1em/16px to get ems. For example, 320px === 20em. In response to the comment, min-width is standard in "mobile-first" design, wherein you start by designing for your smallest screens, and then add ever-increasing media queries, working your way onto larger and larger screens. Regardless of whether you prefer min-, max-, or combinations thereof, be cognizant of the order of your rules, keeping in mind that if multiple rules match the same element, the later rules will override the earlier rules.