html - 媒体查询最大宽度在 Firefox 中不起作用

Question

我想对最大宽度使用媒体查询。它在 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 */

我喜欢做一些非常明显的事情来提醒我—— 你不需要“和”——或“屏幕”

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

    body {
        background-color: red;
    }

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