针对不同媒体查询的不同CSS文件 [英] Different CSS files for different Media queries

问题描述

有一种方法让HTML文件基于媒体属性使用不同的样式表？我知道链接方法采用一种媒体类型，但我发现的所有参考仅指示媒体类型，而不是扩展查询。我也不确定如何确保只有一个选择，以及哪一个。

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.

基本上在我当前的CSS文件我有一个媒体部分这样（简化只是供参考）：

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.

推荐答案

是的。例如，您可以根据屏幕宽度使用不同的CSS文件（一个用于手机，一个用于小型平板电脑），您可以这样操作：

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.

这篇关于针对不同媒体查询的不同CSS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！