CSS media queries for iPhone

Question

I have a website that will be displayed on both the desktop and on an iPhone using media queries to serve different stylesheets so for example ALWAYS load reset.css, but if

Answer 1

Your @import must come before all other content in your CSS.

If you want just 1 CSS file in the HTML, why not copy and paste all those imports and paste them where you're trying to call the imports, ie.

// css for reset.css

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
{
    // css for desktop
}
...

Answer 2

Why don't you use css for desktop as inline, and override it with css for iphone? Moreover, desktops are much wider than these dimensions - (min-device-width: 320px) and (max-device-width: 480px). (min-device-width: 320px) and (max-device-width: 480px) are dimensions of an iphone/smartphones (most of them atleast). Hence, the code should be:

@import "reset.css";

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
{
@import "iphone.css";
}

//1024px - max width of an ipad, min-device-aspect-ratio - detects desktop
@media all and (min-width: 1024px) and (min-device-aspect-ratio: 1/1)
{
@import "desktop.css";
}