html - 针对不同媒体查询的不同 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"/>

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