CSS媒体查询为iPhone

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

它的样式表中进行全部做完，因为我建立我的网站，我只希望使用一个CSS文件中的HTML的方式。

任何人都可以帮助我解决它，以我想要的。干杯。

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替代iphone？而且，桌面比这些尺寸宽得多 - （min-device-width：320px）和（max-device-width：480px）。 （最小设备宽度：320px）和（最大设备宽度：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"; 
}