我可以在文檔頭以及CSS文件中進行媒體查詢嗎？

Question

是否有可能在頭部聲明媒體查詢，像這樣：

<link href="css/style-mobile.css" rel="stylesheet" type="text/css" media="all and (max-width: 736px)" /> 

，然後內風格mobile.css聲明其他媒體查詢，像這樣：

@media only screen and (min-width: 408px) { 

    .topnav-masters { 
     width: 29%; 
     padding: 13px 2%; 
    } 

} 

我的天堂」我無法找到這個問題的答案，而且我最初的實驗似乎讓我覺得這是不可能完成的。有沒有其他人遇到過這個？

這是一個奇怪的用例，我通常會以移動優先的方式構建網站，並且不會有這個問題。然而，在這種情況下，該網站已經有一個單獨的移動網站，現在他們希望它只是響應。我試圖通過將它包含在正確的位置來節省時間，這樣我就不必將大量的CSS文件合併在一起。不過，我需要在其他屏幕尺寸上進行一些CSS調整，這就是爲什麼我要這樣做。

Answer 1

link元素media屬性中的規則用於確定引用的樣式表應該在哪種情況下應用。樣式表中的@media規則不受任何方式的影響，除了它們可能不會被使用，就像樣式表的其餘部分一樣。

所以，這是可能的，它對我來說工作得很好 - 正如預期的那樣，當窗口寬度爲736像素或更少，並且應用樣式表中的@media規則時，將應用樣式表只要窗口寬度大於408像素。

如果它不適合你，那麼你可能做錯了什麼，或者你期望有什麼問題，或者這可能比你在這裏展示的更多（其他規則，特定的瀏覽器/版本/設備，等等）。

Answer 2

是的，但有可能的話，建議只在樣式表中包含它。而且，在響應式設計中，最好使用ems。 Here是我在爲您研究此答案時找到的一些重要提示。