javascript - メディアクエリが機能しないのはなぜですか?

Question

私のCSSは以下のようになります：

@media  (max-device-width:480px) {
    {
        body{background: red;}
   }
}

ブラウザのサイズを iPhone の幅に変更すると、ボディの背景が赤くなりません。何が起こっているか知っていますか。私も試しました@media (max-width:480px)

参考までに、メタビュー投稿タグも次のように設定しています。

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" name="viewport">

score 2 · Accepted Answer

これに設定する必要があります

@media only screen and (max-width:480px) {

    body{background: red;}

}

編集私の変更を説明するのを忘れました。

メディアクエリ内にある余分なブラケットを削除しました。しかし、最も重要なことは、画面のみを対象とするように変更したことです (前述のようにオプションです)。タグですでに述べたように、max-device-width幅はデバイス幅の値にする必要があります。max-widthmeta

score 2 · Accepted Answer

max-width正しいです（max-device-widthウィンドウサイズではなく画面サイズになります）が、余分なブレースがあります。それらを取り出します：

@media  (max-width:480px) {
    body {
        background: red;
    }
}

javascript - メディア クエリが機能しないのはなぜですか?