iPhone 的 CSS 媒体查询

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

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

由于我构建网站的方式，这一切都必须在样式表内完成，并且我只想在 HTML 中使用一个 css 文件。

谁能帮我把它修成我想要的样子。干杯。

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

如果您只想在 HTML 中使用 1 个 CSS 文件，为什么不复制并粘贴所有这些导入并将它们粘贴到您尝试调用导入的位置，即。

// css for reset.css

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