媒體查詢無法在Chrome中使用，但可以在Firefox中使用

Question

我有一系列針對各種不同分辨率的樣式表。 我使用標題中的引用鏈接到它們，例如：

<link rel="stylesheet" media="(min-width: 1024px) and (max-width: 1024px)" href="http://site.com/child-theme/1024.css" />

在Firefox中，它們可以正常工作，但是在Chrome（可能還有Safari）中，它不支持媒體查詢，即使它可以在Firebug中清晰可見地檢測到/看到它們，也可以將它們刪除。

無法為我的生活弄清楚...解決這個難題的任何幫助將不勝感激！

我的（wordpress）網站是： HBB-Inc.com要查看其外觀，請在Firefox中查看它，然后在Chrome中進行比較。

Answer 1

這是因為CSS的性質，代表C ascading 小號 tyle 小號 heets。

互聯網上許多地方對此的修訂報價：

級聯是特殊的部分。 樣式表旨在通過一系列樣式規則進行級聯，例如瀑布上的河流。 河流中的水撞擊瀑布中的所有岩石，但只有底部的岩石會影響水的確切流動位置。 樣式表中的層疊也是如此。

換句話說，因為您的media="all"樣式表在您的頭部下方是向下鏈接的，所以它們會影響您之前在流程中樣式相同的元素的外觀。

我認為將樣式表及其media屬性設置為all到頭部的開頭將解決您的問題