Menu
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.
403
You may use as many media queries as you would like in a CSS file. Note that you may use the and operator to require multiple queries to be true, but you have to use the comma (,) as the or operator to separate groups of multiple queries. The not keyword can be used to alter the logic as well.
you should keep only one css file. Let me tell you in simple one line, once your website loads in client web browser the static resource can be cached that helped your website to boost and number of web request can be reduce when user browse multiple pages of your website.
Depending on how you layout your site you may need to use more or less queries, as you only need a query for each seperate layout/design of the site. A good choice for basic use would be Smartphone, Tablet, Standard Screen, HD Screen or 4.
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.
200
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
