@media min-width无法被firefox识别8 [英] @media min-width not being recognised by firefox 8

问题描述

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

I have been using media queries for the first time, and things going well, but seem to have encountered a strange problem.

这里是我的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中，hoever，不拾取最后一个样式表（最大宽度：320px）。

Everything works fine in Chrome, and the stylesheets are implemented as expected. In firefox, hoever, the last stylesheet (max-width:320px) isn't picked up.

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

I've done alot of searching and can't find anything similar.

任何建议...

推荐答案

在这里超级，但只需更改

Super late here, but just change the

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

到

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

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

For some reason, firefox won't recognize anything below 480px, so if we change the 320px to 768px it will act as the default value, while the more precise queries will override it.

编辑：确保覆盖元素位于CSS中的iphone下面。

Make sure the overriding element are BELOW the iphone's in the CSS.

这篇关于@media min-width无法被firefox识别8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！