AFAIK the only solution to inject style sheets, apart from custom code in the ski,n is our (free) style helper skin object, which can do what you want and much more.

http://stylehelper.codeplex.com/

You would use:

<%@ Register TagPrefix="fortyfingers" TagName="STYLEHELPER" Src="~/DesktopModules/40Fingers/SkinObjects/StyleHelper/StyleHelper.ascx" %>
<fortyfingers:STYLEHELPER ID="sh1" AddToHead='<link href="narrow.css" rel="stylesheet" media="only screen and (max-width:500px)" /><link href="medium.css" rel="stylesheet" media="only screen and (max-width:768px)" />' runat="server" />

(paths are relative to the skin path)

Or you can use them inside skin.css:

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

---