Question

I’ve set up a base stylesheet as well as a media-query stylesheet, following a progressive enhancement philosophy, like below:

<!-- Empty CSS file; base style for really old mobile browsers (128px,240px,<320px) -->
<link rel="stylesheet" href="css/global.css" media="all">
<!-- Layout for newer narrow viewport browsers, as well as desktop browsers -->
<link rel="stylesheet" href="css/layout.css" media="all and (min-width: 20em)">

However, when I fire up Firefox and resize it to be less than 320px, it still loads layout.css instead of showing me an unstyled page. Why is this?

Additional to that (instead of asking a separate question), if I do add some base styles to global.css and add a single media query to layout.css then the latter layout is rendered and remains on the page even when I re-size the browser to be less than the minimum width for layout.css to apply.

Answer 1

The issue here is that your minimum viewport width for Firefox just happens to be wider than 320px, meaning that no matter how narrow you resize the window to be, it will never be less than 320px. Your layout.css styles will always be applied in Firefox because the viewport always meets the min-width requirement of 320px (and probably 20em). Try your current setup in Chrome (Chrome typically has a narrower minimum viewport width), and try something like min-width: 600px in Firefox, and your styles should be applied as expected (layout.css will be applied when the viewport is at least 600px wide).

Edit

This is a good demo site for media queries: Media Query Playground. It will allow you to see what your minimum viewport width is for various browsers as well- just resize until the width value stops changing. If you make changes to your toolbar (by adding/removing items) in Firefox you can change the minimum viewport width.