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

但是请注意，您需要确保每个样式表的要求永远不会相同，就好像它们是一样的(假设上面的两个样式表具有相同的最小宽度和最大宽度) -width) 两者都会应用。