How do I apply different css files to different viewports with Omega subthemes?
The way I see it you've got 2 options:

Option 1: Don't use multiple style sheets. You can have conditional elements in a single CSS file using CSS media queries like this:

// Default styles
.content {max-width:960px}

// Tablet styles
@media only screen and (min-device-width: 600px) and (max-device-width: 960px), screen and (min-width: 600px) and (max-width: 960px){
  .content {max-width:600px;}
}

// Phone styles
@media only screen and (max-device-width: 600px), screen and (max-width: 600px) {
  .content {max-width:100%;}
}


That will even work on a desktop PC with a small window. For more info go here.

Option 2: There is a way to include those conditions in a link tag. That way you can divide up your CSS files for easy viewing. Like this:

&lt; link rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="mobile-view.css" /&gt;


You'll have to include it manually. I don't know if drupal_add_css will work with media property. You might have to use drupal_add_html_head.