iPhone 的 CSS 媒体查询

Question

我有一个网站，将在桌面和iPhone上显示，使用媒体查询来服务不同的样式表。例如，始终加载reset.css，但如果在桌面上加载desktop.css，如果在iPhone上（或用户调整浏览器窗口大小）则加载iphone.css，但不再加载desktop.css，并且基于用户是否移动了iPhone，还要加入orientation.css文件。

/*

    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文件，所以所有内容都必须在样式表内完成。

有人能帮我修复它以符合我的要求吗？谢谢。

- Cameron

Answer 1

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

如果你只想在HTML中使用一个CSS文件，为什么不将所有那些导入语句复制并粘贴到你尝试调用这些导入语句的位置呢？

// css for reset.css

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

- Koes Bong

Answer 2

为什么不在桌面端使用内联CSS，并用iPhone的CSS覆盖它？此外，桌面比这些尺寸要宽得多 - (min-device-width: 320px)和(max-device-width: 480px)。 (min-device-width: 320px)和(max-device-width: 480px)是iPhone /智能手机（至少大部分）的尺寸。因此，代码应该是：

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

- Teena Thomas