I'm looking for the best way to use media queries within a drupal theme (based on Zen 5)

The options I've found are :

  1. Defining media queries in the info file eg :

    stylesheets[all][] = styles/base.css
    stylesheets[all and (min-width: 480px)][] = styles/480up.css
    stylesheets[all and (min-width: 720px)][] = styles/720up.css
    stylesheets[all and (min-width: 960px)][] = styles/960up.css
  2. Include all the css file and wrap all definitions within the media queries in the files

  3. Use base.css and use media queries at the end of this file to import others stylesheets.

Of theses three options, which is the lightest? Is there a fourth one?

1 Answer 1


The second option would be better, because of aggregation.

For the first option, if you turn on aggregation on your site, the files will be bundled by media query. So, in your case, you would have at least 4 bundles, so 4 requests to fetch your site CSS files.

For the 3rd option, the browser will request the imported CSS files seperately, so you lose the benfit of aggregation completely.

If you put the media queries inside the CSS files, they will be aggregated together, resulting in only one bundle. This is better for performance, especially for mobile devices.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.