In practice, many designers convert pixels to ems, largely b/c ems better afford zooming. At standard zoom 1em === 16px. Multiply pixels by 1em/16px to get ems. For example, 320px === 20em.
Suggested breakpoints
Source: http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480×320 phones (Android) */ }
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800×480 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 */ }
Refined to work better with 960 grids:
@media (min-width:320px) { /* smartphones, iPhone, portrait 480×320 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 800×480 or 854×480 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 */ }
Managing multiple styles by linking to different stylesheets using media queries
Source: http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html
Adding all the styles in the same CSS file is acceptable for the above example, but for a full-fledged website, it will become a pain to manage the code. That is why I prefer to link a new stylesheet for specific screen sizes. The way to do that is to use the media attribute of the link tag.
<link rel=”stylesheet” type=”text/css” media=”only screen and (max-device-width: 480px)” href=”mobile-device.css” />
Now you can define all the mobile specific styles in the mobile-devices.css file.
Google Mobile SEO guideline
Source: https://developers.google.com/webmasters/mobile-sites/mobile-seo/
Mobile: In this document, “mobile” or mobile devices refers to smartphones, such as devices running Android, iPhone, or Windows Phone. Mobile browsers are similar to desktop browsers in that they can render a broad set of the HTML5 specification, although their screen size is smaller and in almost all cases their default orientation is vertical.
Tablets: We consider tablets as devices in their own class, so when we speak of mobile devices, we generally do not include tablets in the definition. Tablets tend to have larger screens, which means that, unless you offer tablet-optimized content, you can assume that users expect to see your site as it would look on a desktop browser rather than on a smartphone browser.
Based on the above, I would be inclined to set tablets to load the same CSS version as desktop since this should not penalize SEO rankings.