Question

我第一次使用媒体查询，事情进展顺利，但似乎遇到了一个奇怪的问题。

这是我的css：

@media only screen and (min-width:481px) and (max-width:768px) { /* tablet portrait */
   css here
}

@media only screen and (min-width:321px) and (max-width:480px) { /* mobile landscape */
   css here
}

@media only screen and (max-width:320px){ /* mobile portrait */
   css here
}

Chrome中的一切正常，样式表按预期实现。在firefox中，最后一个样式表（max-width：320px）没有被选中。

我做了很多搜索，找不到类似的东西。

非常感谢，如果有人有任何建议......

Answer 1

超级晚了，但只需改变

@media only screen and (max-width:320px){ /* mobile portrait */
    css here
}

到

@media only screen and (max-width:768px){ /* mobile portrait */
    css here
}

出于某种原因，firefox将无法识别480px以下的任何内容，因此如果我们将320px更改为768px，它将作为默认值，而更精确的查询将覆盖它。

编辑：确保覆盖元素低于CSS中的iphone。

Answer 2

只是为了增加我的经验;我遇到了同样的问题，但事实证明，禁用Firebug插件使其表现得如此。我正在使用FF 15（mac）。 Firebug 1.10.03

我建议首先禁用所有插件以查看它是否有效，然后逐个将它们重新打开。

@media min-width不被firefox 8识别

2 个答案: