iPhone 的 CSS 媒体查询答案

【问题标题】：CSS media queries for iPhoneiPhone 的 CSS 媒体查询
【发布时间】：2026-01-31 12:55:01
【问题描述】：

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

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

【问题讨论】：

标签： css media-queries

【解决方案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
}
...

【讨论】：

【解决方案2】：

你为什么不使用 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";
}

【讨论】：