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