mediaqueries max-width не работает в firefox

Question

Я хочу использовать mediaquerie для max-width. Он отлично работает с Chrome, но в Firefox это не так, почему?

jsfiddle code

CSS

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

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

Answer 1

Ваш синтаксис неправильно, вам нужно пространство между и (макс-ширина)

Ниже

@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 */ 

Я хотел сделать что-то действительно очевидное, как это, чтобы напомнить мне --- Вам не нужно «и» - или «экран»

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

    body { 
     background-color: red; 
    } 

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