媒体查询最大宽度在 Firefox 中不起作用答案

【问题标题】：mediaqueries max-width not working in firefox媒体查询最大宽度在 Firefox 中不起作用
【发布时间】：2017-03-29 22:35:29
【问题描述】：

我想为最大宽度使用媒体查询。它在 Chrome 上运行良好，但在 Firefox 中却不行，为什么？

jsfiddle code

CSS

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

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

【问题讨论】：

标签： html css media-queries

【解决方案1】：

你的语法错误，and(max-width)之间需要一个空格

见下文

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

JSFIDDLE

【讨论】：

【解决方案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 =============== */

【讨论】：

ps - 如果你只是在学习@media 规则的东西，我会鼓励你从 min-width 开始，首先从小屏幕开始工作。