CSS Media查詢是否加載所有引用的CSS？

如果我使用CSS Media Query來應用2個不同的CSS，比如desktop.css和mobile.css，這取決於我的最大寬度，這個實際上是如何工作的？CSS Media查詢是否加載所有引用的CSS？

這兩個CSS都會被瀏覽器始終加載，然後在客戶端應用實際的一個或者是瀏覽器智能加載只加載相關的CSS？

2013-01-09 testndtv

發佈您的媒體查詢。如果您調整瀏覽器大小，移動媒體查詢仍然可以應用。 – Blender

如果我使用設備寬度而不是寬度的話......只能在桌面或移動設備上發生，但不能同時發生的事情...... – testndtv

它加載所有的CSS並通過普通的CSS層次結構應用它。

2013-01-09 17:10:15 Brendan

這一切都取決於你如何以及在哪裏定義你的CSS。我有this page作爲基於不同媒體查詢加載圖片的參考。

但基本上，如果你基於媒體查詢有條件地加載你的CSS，那麼它不應該加載，直到媒體查詢得到滿足。

2013-01-09 17:14:58

我以爲我有一種CSS沒有加載的場景（沒有http請求）但我無法得到那個結果。如果我找到它，我會更新我的答案。雖然圖像上的頁面仍然很好。 –

只要您使用實際的媒體查詢，所有的CSS將在加載頁面時加載，因爲這是支持媒體查詢的所有瀏覽器的默認行爲。直到達到這些斷點或直到符合規則（如果您不使用斷點媒體查詢），它纔會應用CSS。

如果您使用的是模仿媒體查詢行爲的JavaScript，那麼這就完全不同了，取決於寫入的方式取決於CSS是否加載。代碼示例將有助於確定一個有效的答案 - 但從我所知道的情況來看，您的第一個陳述是正確的;瀏覽器將始終加載所有的CSS，並且僅根據當時使用的視口/設備來應用相關的CSS。

2013-01-09 17:20:54 langauld

回答