CSS3媒體查詢與單獨的CSS文件

我想創建一個不同的CSS文件特定的移動設備。我已經能夠檢測到設備是否爲移動設備，但是，只有當我使用@media語句在同一個文件中定義了所有樣式時。CSS3媒體查詢與單獨的CSS文件

我寧願讓這些文件分離，我一直無法實現，並希望你告訴我如何。

<link type="text/css" rel="stylesheet" href="css/combined.css" media="screen" />

combined.css：（此工作，但所有的款式都在同一個CSS文件）

// for desktop browsers 
@media only screen and (min-width: 1000px) { 
    h1 { text-decoration: none; } 
} 

// for mobile devices 
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { 
    h1 { text-decoration: underline; } 
}

當我嘗試它們分開......

<link type="text/css" rel="stylesheet" href="css/desktop.css" media="screen" /> 
<link type="text/css" rel="stylesheet" href="css/mobile.css" media="only screen and (min-device-width: 320px) and (max-device-width: 480px)" />

桌面.css：

h1 { text-decoration: none; }

mobile.cs s：

h1 { text-decoration: underline; }

...它不工作了。 爲什麼？我如何使它工作？

來源

2012-12-09 nunos

你如何檢測設備是移動還是不？你使用PHP嗎？

如果是這種情況，那麼您可以根據您的is_mobile標誌輕鬆包含正確的文件。

<?php if(!$is_mobile) { ?> 
    <link type="text/css" rel="stylesheet" href="css/desktop.css" /> 
<?php } else { ?> 
    <link type="text/css" rel="stylesheet" href="css/mobile.css" /> 
<?php } ?>

來源

2012-12-10 12:47:49

我正在使用CSS3媒體查詢來檢測它，我認爲這是一個很好的做法。這是在我上面的問題中解釋的。儘管感謝您的回覆。 – nunos

我誤解了你的問題。如果將單個文件包裝在媒體查詢中會發生什麼？在服務器端檢測移動設備的好處是，用戶只需下載一個文件，而不是兩者。由於大多數手機比大多數臺式機都緩慢且受限制，因此這將會更好地加快速度。 –

CSS3媒體查詢與單獨的CSS文件

回答

相關問題