How to add custom CSS per media query in Omega 3 theme?
Part of the magic of Omega3 is that it does that for you!

Omega will always load the global.css file. If you are in a mobile layout (too narrow for a grid), that is the only file that loads. When you increase the browsers width to narrow, then omega 3 dynamically loads:


global.css
SUBTHEME-alpha-default.css (loads for all non-mobile-layouts)
SUBTHEME-alpha-default-narrow.css


If you keep increasing your browsers width to the normal layout, then these css files are loaded:


global.css
SUBTHEME-alpha-default.css
SUBTHEME-alpha-default-narrow.css
SUBTHEME-alpha-default-normal.css


Note that any CSS definitions you have in SUBTHEME-alpha-default-normal.css will override definitions in global.css, SUBTHEME-alpha-default.css, and SUBTHEME-alpha-default-narrow.css

To answer your question then, custom CSS for the narrow layout should go in SUBTHEME-alpha-default-narrow.css, custom CSS for the normal layout goes in SUBTHEME-alpha-default-normal.css, and custom CSS for the wide layout goes in SUBTHEME-alpha-default-wide.css. Just put it in and let Omega3 do the rest!

See https://groups.drupal.org/node/156719 for more info