html - mediaqueries max-width が firefox で機能しない

Question

max-width にメディアクエリを使用したい。Chrome では正常に動作しますが、Firefox では動作しません。なぜですか?

jsfiddle コード

CSS

.box {
    width: 150px;
    height: 150px;
    background-color: blue;
}

@media screen and(max-width: 400px){    
    .box {
        background-color: red;
    }
}

Answer 1

構文が間違っています。 and(max-width) の間にスペースが必要です

下記参照

@media screen and (max-width: 400px){
    .box {
        background-color: red;
    }
}

JSFIDDLE

Answer 2

上記の @media ルールには閉じ括弧がありません -

.box{
    width: 150px;
    height: 150px;
    background-color: blue;
}

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

    .box{
        background-color: red;
    }

} /* END THIS @MEDIA RULE */

私は思い出させるために、このような本当に明白なことをするのが好きです--- 「and」や「画面」は必要ありません

@media (min-width: 30em){ /* ============ */

    body {
        background-color: red;
    }

} /* === END MEDIUM BREAK =============== */