Screen and Mobile Stylesheets

According to documents, syntax of loading another file in specific device/condition is like this:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" />
<link rel="stylesheet" media="only screen and (min-width: 401px)" href="desktop.css" />

This will load only one css file for every single amount of width

For iPhone 4 and new generation iPod touch that have Retina display there is something that you should note. iPhone 4 width is 640 pixels that many developers don't count this width as a mobile browser width. If you add this below meta tag in your document problem will be solved

<meta name="viewport" content="width=320">

This meta tag will impact your images quality. If you want to fix that problem then you need to read about this here.

Media Queries: How to target desktop, tablet, and mobile?

IMO 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.

How to distinguish between mobile and screen with CSS media query?

It's not that your Nexus 5 renders webpages at 1080px wide, it's that your site is not performing responsively to fit your phone screen, so it's rendering as a zoomed-out desktop site.

You need to add this viewport meta tag to your site's <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Once that's in, your Nexus 5 should render webpages at something closer to 400px wide, and you can base your media queries around that.

Here's how you'd make your thumbnails 125px wide for screens under 480px wide:

@media (max-width: 480px) {
  img {
    width: 125px;
  }
}

How to detect ONLY with CSS mobile screens

The @media rule is used to define different style rules for different media types/devices.

If it doesnt work, check your code. you might have made a typo somewhere.

Example:

@media only screen and (max-device-width: 640px) {
    /* Styles */
}
    
@media only screen and (max-device-width: 768px) {
    /* Styles */
}

Earlier post:
How to code CSS media queries targeting ALL mobile devices and tablets?

W3schools: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

CSS Media Query For Mobile Not Applying

It is normal to apply the 1303px media because to tell that it is max-width, it is mean that all the smaller screens will apply the style in addition to that it has come to the last style. So it will override all previous styles.

"szulbix" solution is very good for your case.

how to make css media query to work on mobile phones

I did not add meta(name="viewport", content="width=device-width, initial-scale=1.0") to my base template. That's why it was acting like that.

html/css to fit entire screen for mobile

Remove the display: table from the html tag and display: table-cell from the body tag in css. the body centers in the html tag because of that, which creates the whitespace on both sides.

Screen and Mobile Stylesheets