mediaqueries max-width not working in firefox

问题

I want to use a mediaquerie for max-width. It works fine with Chrome but in Firefox it does not, why?

jsfiddle code

CSS

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

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

回答1:

Your syntax is wrong, you need a space between and(max-width)

See below

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

JSFIDDLE

回答2:

There is no closing bracket in your above @media rule -

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

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

    .box{
        background-color: red;
    }

} /* END THIS @MEDIA RULE */

I like to do something really obvious like this to remind me --- You don't need the "and" - or the "screen"

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

    body {
        background-color: red;
    }

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

来源：https://stackoverflow.com/questions/16866595/mediaqueries-max-width-not-working-in-firefox