I am using Firefox 9.0.1, I am working on a responsive layout and I have tested in IE 8, Google Chrome 16.0.912.63 m and Safari 5.0.5 all on a Windows 7 PC, for some reason Firefox is not applying the media query when I resize the window, I did a simple test:
@media screen and (max-width:320px)
I may be a few months late, but I actually encountered this today, and wanted to share the solution.
It’s actually not a CSS or CSS interpretation problem at all–it’s the way Firefox does (or doesn’t) resize the viewport. Unlike Google Chrome, and most other browsers, Firefox allows it’s toolbars to affect viewport size. The only way to make the viewport resize below the width of your toolbars in Firefox is to disable them. You’ll need to go to View > Toolbars and uncheck each. Then try resizing and watch your media queries take effect.
I hope I explained that right. It’s been a trying day!