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

Posted 2023-03-06

【中文标题】针对不同媒体查询的不同 CSS 文件

【英文标题】：Different CSS files for different Media queries

【发布时间】：2021-10-30 14:56:24

【问题描述】：

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

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

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

我想要的是提供两个不同的文件，而不是让这个部分和其他媒体非常相似的部分。

【参考方案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) 两者都会应用。

【讨论】：

如果多个匹配，它如何决定选择哪一个？

@edA-qamort-ora-y，它不会选择一个或，它会根据媒体查询是否匹配来应用每个样式表。如果应用了多个样式表，则级联将照常工作。

好的，我想如果我有两个，我可以使用第一个查询的“不”。

或者，只要确保有不重叠的规则（如果可能的话）:)