iPhone的CSS媒体查询 [英] CSS media queries for iPhone

问题描述

我有一个网站，将显示在桌面和iPhone上使用媒体查询提供不同的样式表，例如，总是加载reset.css，但如果在桌面加载desktop.css以及，但如果在iPhone （或者如果用户调整浏览器窗口大小）加载iphone.css而不是加载desktop.css不再加载，并根据用户是否已移动iPhone添加orientation.css文件。

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.

例如

/*

    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";
    }
}

它必须在样式表内完成，因为我建立我的网站的方式，我只想在HTML中使用一个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.

推荐答案

您的@import必须在CSS中的所有其他内容之前。

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

如果你想在HTML中只有一个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
}
...

这篇关于iPhone的CSS媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！