Optimized way to use media queries 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 : 


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

Include all the css file and wrap all definitions within the media queries in the files
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?
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.