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

这是因为当你定义max-width：1200px时，那个CSS会覆盖max-width：600px CSS。所以，而不是max-width：1200px给（最小宽度：601px＆amp;＆amp; 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覆盖规则吗？同一个选择器的相同属性将选择最后一个作为第一优先级。

奇怪的媒体查询 - 不适用

2 个答案: