html - 奇怪的媒体查询 - 不适用

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 && 最大宽度:1200px)

这适用于 601-1200 像素之间的宽度