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 on desktop load desktop.css as well, but if on iPhone (or if user resizes browser window to size) load iphone.css instead BUT don't load desktop.css anymore, and also add in the orientation.css files based on if the user has moved the iPhone.

e.g.

/*

    Theme Name: mywebsite

*/

@import "reset.css";

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

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

    @media all and (orientation:portrait)
    {
        @import "iphone-portrait.css";
    }

    @media all and (orientation:landscape)
    {
        @import "iphone-landscape.css";
    }
}

It has to be all done inside the stylesheet because of the way I am building my website and I only want to use one css file in the HTML.

Can anyone help me fix it up to what I want. Cheers.

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