0

我有以下（简化的）示例代码：（jsbin：http ://jsbin.com/cisahilido/1/edit?html,css,output ）

SCSS：

.container {
  background: none;
}

@media screen and (max-width: 480px) {
  .container {
    background: red;
  }
}

@media screen and (max-width: 768px) {
    .container {
    background: white;
  }
}

@media screen and (max-width: 1024px) {
    .container {
    background: blue;
  }
}

标记：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    hello!
  </div>
</body>
</html>

现在，当屏幕为 480 像素或更少时，我希望它.container具有红色背景。但是，它似乎总是有蓝色背景，直到 1024px 断点，它才没有背景。

为什么 max-width 样式会用较大的断点覆盖较小的断点？

4

1 回答 1

2

因为 480 小于最后一个 max-width 的 1024。CSS 总是使用最后一个有效值，所以你需要将 max-width 媒体查询从大到小排序以获得预期值。

jsbin

.container {
    background: none;
}

@media screen and (max-width: 1024px) {
    .container {
        background: blue;
    }
}

@media screen and (max-width: 768px) {
    .container {
        background: white;
    }
}

@media screen and (max-width: 480px) {
    .container {
        background: red;
    }
}
于 2015-10-30T21:06:52.743 回答