html - 媒体查询在 Chrome 中不起作用，在 Firefox 中有效

Question

我有一整套样式表，它们特定于许多不同的分辨率。我使用 header 中的引用链接到它们，例如:

<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的特性，它代表Cascading Style Sheets。

互联网上许多地方对此的修改引述:

Cascade is the special part. A style sheet is intended to cascade through a series of style rules, like a river over a waterfall. The water in the river hits all the rocks in the waterfall, but only the ones at the bottom affect exactly where the water will flow. The same is true of the cascade in style sheets.

换句话说，因为您的 media="all" 样式表在您的 head 部分中被链接到较低的位置，它们会影响您在此过程中早些时候设置样式的相同元素的外观。

我认为将 media 属性设置为 all 的样式表移动到 head 部分的开头将解决您的问题