Question

我想使用mediaquerie来获得最大宽度。它适用于Chrome，但在Firefox中没有，为什么？

CSS

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

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

Answer 1

你的语法错误，你需要一个空间和（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 =============== */

媒体查询max-width在firefox中不起作用

2 个答案: