Html 为移动设备、低分辨率桌面和高分辨率桌面编写媒体查询

我使用屏幕宽度和屏幕高度来检测手机和台式机之间的差异，然后检测高分辨率台式机和低分辨率台式机

我有一些JavaScript，可以用来加载不同的CSS文件。看起来是这样的：

JavaScript

如果屏幕宽度>800{ 如果屏幕高度<900{ 文件。书写； }否则{ 文件。书写； } }否则{ 文件。书写； 文件。书写； } 我想改变这一点并使用媒体查询，这就是我所拥有的：

CSS

这使得无论方向如何，都可以下载移动样式表。然而，桌面样式表总是设置为高分辨率，即使它实际上是低分辨率的

---

如您所见，我的桌面模式为高度800px，媒体查询设置为最小设备高度：901px，但它正在下载高分辨率样式表。为什么呢

将所有CSS文件包含到您的应用程序中。或者，您可以将它们组合到单个CSS文件中

<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="/Mobile.css" type="text/css" />
<link href="/LowRes.css" type="text/css" />
<link href="/HiRes.css" type="text/css" />

---

看看CSS媒体查询。作为替代方案，您可以使用，但某些旧浏览器可能不支持它们

为什么要投否决票？想解释一下吗？你知道这里需要媒体查询，但你没想过要研究如何编写媒体查询？@cimmanon:这不是重复！我已经更新了我的问题，你指出的问题中的答案与问题无关。我正在寻找3条规则来复制javascript；我已经更新了这个问题。如图所示，我一直在想为什么应该将样式表限制为桌面低分辨率的最小设备高度：901px不起作用。问题是如何编写3条规则来检测移动/桌面低分辨率/桌面高分辨率，到目前为止，所有答案都有很多规则，但没有一条答案将问题简化为3条规则。因此，不，这不是重复，除非您实际更改了设备的分辨率，您所做的只是更改视口的大小，*设备宽度属性不响应视口的更改。如果你想要你所要求的，你会接受问题中的建议，这被标记为的副本，而不是跺脚声明这不是副本，它没有给我复制/粘贴到我的项目中所需的确切代码@cimmanon：不管怎样，在3个媒体查询中检测移动/低分辨率桌面/高分辨率桌面就是这个问题的核心。现在我已经用javascript编写了它，我正在寻找替代它的方法。你能还原副本看看其他人能想出什么吗？这不起作用，因为如果用户在移动设备上并旋转到横向，那么他就不再在移动设备上了。我明白了。仅使用媒体查询无法检测设备类型。您仍然需要依靠JavaScript来实现这一区别。也可能有帮助。好的，你能投票重新开始这个问题吗？当然可以。你还在寻找只使用CSS的解决方案吗？是的，我的目标是用一个纯CSS媒体查询实现来取代javascript。

<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="/Mobile.css" type="text/css" />
<link href="/LowRes.css" type="text/css" />
<link href="/HiRes.css" type="text/css" />

@media (max-width: 800px) { 
    // all contents of Mobile.css
}
@media (min-width: 801px) and (max-height:900px) { 
    // all contents of LowRes.css
}
@media (min-width: 801px) and (min-height:901px) { 
    // all contents of HiRes.css
}