@media min-width is not recognized by firefox 8

Question

I used media queries for the first time, and everything is going well, but it seems to run into some strange problem.

here is my 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
}

Everything works fine in Chrome, and style sheets are implemented as expected. In firefox, hoever, the last stylesheet (max-width: 320px) is not matched.

I searched a lot and did not find anything like it.

Very valuable if anyone has any advice ...

Answer 1

Super late here but just change

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

to

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

- firefox 480px, , 320px 768px, , .

: , overriding iphone CSS.

Answer 2

; , , Firebug . FF 15 (mac). Firebug 1.10.03

, , , .