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.