Question

我有以下（简化）示例代码：（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>

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

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

Answer 1

因为480小于1024的最后一个最大宽度.CSS总是使用最后一个有效值，因此您需要从最大到最小的顺序排序最大宽度的媒体查询以获得预期的值。

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;
    }
}

媒体查询特异性 - 为什么使用最大宽度媒体查询时使用的最大样式？

1 个答案: