css - 1 つのメディア クエリのみが機能し、残りは無視されます

Question

さて、デザインのさまざまなブレークポイントにいくつかのメディア クエリがあります。

例えば

 @media all and (max-width:700px){
      body{
        background:red;
      }
 }
 @media all and(max-width:560px){
      body{
        background:blue;
      }
 }

デスクトップでは問題なく動作しますが、LG Android ブラウザーで表示すると、最初のメディア クエリのみがトリガーされます。

最初のクエリの最大幅を 560 未満に変更すると、とにかくトリガーされるため、幅とは関係ありません。

これについて何か考えはありますか？

Answer 1

min-width で試すことができます。機能: デバイス幅 320px から 559px、デバイス幅 560px から 699px、デバイス幅 700px から XXX。最新のメディア タイプは、他のすべてのメディア タイプを上書きします。

@media only screen and (min-width: 320px) {
    body { background:red; }
}

@media only screen and (min-width: 560px) {
    body { background:blue; }
}

@media only screen and (min-width: 700px) {
    body { background:green; }
}