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 に答える