奇怪的媒体查询-不适用

Question

我设置了一堆查询，但是我意识到它们都没有真正起作用。 所以我开始一个接一个地测试它们。 1217.css适用于大于1201px的任何内容。 1200.css适用于最大1200px的像素，而600.css适用于最大600px的像素。 现在，当我调整窗口大小时，我看到从1200.css变为1217.css的变化，但是当我将窗口宽度减小到600px以下时，什么也没有发生。 好像没有这种风格存在。 1200.css仍适用于1200px以下的任何内容。 为什么不应用600.css样式？

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 600px) " href="600.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 1200px)" href="1200.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 1201px)" href="1217.css" />

1217.css
#contentQuote {
background-color: red;
}

1200.css
#contentQuote {
background-color: #f07057;
}

600.css
#contentQuote {
background-color: blue;
}

Answer 1

这是因为当您定义最大宽度：1200px时，该CSS会覆盖最大宽度：600px CSS。 因此，而不是max-width：1200px给（min-width：601px && max-width：1200px）

这对于601-1200px之间的宽度将正常工作

Answer 2

您可能需要将链接标记的顺序更改为：

<link rel="stylesheet" type="text/css" media="only screen and (min-width: 1201px)" href="1217.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 1200px)" href="1200.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 600px) " href="600.css" />

还记得CSS覆盖规则吗？ 同一选择器的相同属性将选择最后一个作为第一优先级。