Different CSS files for different Media queries

Question

Is there a way to have an HTML file use a different stylesheet based on the media properties? I know that the link method takes a media type, but all the references I find only indicate the media type, not an extended query. I'm also unsure of how it would ensure only one is selected, and which one.

Basically in my current CSS file I have a media section like this (simplified just for reference):

@media (min-device-pixel-ratio: 1.5) {
  specific-media-rules
}

What I'd like is that instead of having this section and a very similar section for other media is to serve two distinct files.

Answer 1

Yes. An example could be the following: you want to use a different CSS file depending on the screen width (one for phones, one for small tablets) and you could do so like such:

<link rel="stylesheet" media='screen and (min-width: 140px) and (max-width: 380px)' href="phone.css"/>
<link rel="stylesheet" media='screen and (min-width: 381px) and (max-width: 700px)' href="tablet.css"/>

Note however, that you need to make sure the requirements for each stylesheet won't ever be the same, as if they are (say if both stylesheets above had the same min-width and max-width) both would be applied.