针对不同媒体查询的不同CSS文件

Question

有没有办法让HTML文件根据媒体属性使用不同的样式表？我知道link方法采用媒体类型，但我发现的所有引用只指示媒体类型，而不是扩展查询。我也不确定如何确保只选择一个，以及哪一个。

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

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

我喜欢的是，不是将此部分和其他媒体的相似部分用于提供两个不同的文件。

Answer 1

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

<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"/>

请注意，您需要确保每个样式表的要求不会相同，就像它们一样（例如，如果上面的两个样式表都具有相同的最小宽度和最大值-width）两者都将被应用。