Question

我有一个网站，它将在桌面和iPhone上显示，使用媒体查询来提供不同的样式表，例如ALWAYS加载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文件，因此必须在样式表中完成所有操作。

任何人都可以帮我解决我想要的问题。欢呼声。

Answer 1

你的@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
}
...

Answer 2

为什么不将css用作桌面内联，并使用css for iphone覆盖它？此外，台式机比这些尺寸宽得多 - （最小设备宽度：320px）和（最大设备宽度：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";
}

针对iPhone的CSS媒体查询

2 个答案: