0

幅が 768 の画面には 2 つのルールがあります。問題は、それよりも大きな画面では、ブラウザが間違ったルールを採用し、古い画面用のルールを適用することです。

@keyframes p1
{
    from{
        bottom:0;display:none;opacity:0;
    }
    50% {
        bottom:15;opacity:0.5;
    }
    to{
        bottom:25%;display:block;opacity:1;
    }
}


@media screen and (max-width: 800px) {
    @keyframes p1
    {
        from{
            bottom:0;display:none;opacity:0;
        }
        50% {
            bottom:10;opacity:0.5;
        }
        to{
            bottom:15%;display:block;opacity:1;
        }
    }
}

大きな画面では、ブラウザはデフォルトを無視して max-width ルールを採用します。

4

1 に答える 1

0

これは重複している可能性が高いこの質問を確認してください。多くの適切な回答があります。

これは、大きな画面では div が青色 (デフォルト) で表示され、中程度の画面では緑色で表示され、小さい画面では赤色で表示される場合に期待どおりに機能します。

メディア クエリ ルールの順序に注意してください。

補足: また、一部の「小さな画面」には、物理​​的にサイズが小さいにもかかわらず、多くのピクセルが表示される場合があることに注意してください。デバイスの詳細については、この回答を確認してください。

div {
  background-color: blue;
  height: 30px;
}

@media screen and (max-width: 1200px) {
  div {
    background-color: green;
  }
}

@media screen and (max-width: 800px) {
  div {
    background-color: red;
  }
}
<div></div>

于 2016-01-07T13:31:46.820 に答える