3

我有一个网站将同时显示在桌面和 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 文件。

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

4

2 回答 2

2

您的 @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
}
...
于 2011-03-16T19:27:48.357 回答
1

为什么不使用 css for desktop 作为内联，并用 css for iphone 覆盖它？此外，桌面比这些尺寸宽得多 - (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";
}
于 2012-08-15T17:24:43.430 回答