为移动设备、低分辨率桌面和高分辨率桌面编写媒体查询 [重复]
Posted
技术标签:
【中文标题】为移动设备、低分辨率桌面和高分辨率桌面编写媒体查询 [重复]【英文标题】：Writing media queries for mobile devices, low-res desktop and hi-res desktop [duplicate] 【发布时间】：2015-11-12 23:44:08 【问题描述】：我同时使用屏幕宽度和屏幕高度来检测移动设备和桌面设备之间的差异，然后检测高分辨率桌面和低分辨率桌面。
我有一些 javascript 用于加载不同的 CSS 文件。它看起来像这样：
JavaScript
<script>
if (screen.width > 800)
if (screen.height < 900)
document.write('<link href="/LowRes.css" type="text/css" />');
else
document.write('<link href="/HiRes.css" type="text/css" />');
else
document.write('<meta name="viewport" content="width=device-width,initial-scale=1">');
document.write('<link href="/Mobile.css" type="text/css" />');
</script>
我想改变它并使用媒体查询，这就是我所拥有的：
CSS
<link media="screen and (min-device-width: 801px) and (min-device-width: 801px)" href="low.css" rel="stylesheet" />
<link media="screen and (min-device-height: 901px)" href="hi.css" rel="stylesheet" />
<link media="screen and (max-device-width: 800px) and (orientation : portrait), screen and (max-device-height: 800px) and (orientation : landscape)" href="mobile.css" rel="stylesheet" />
这允许无论方向如何都可以下载移动样式表。但是，桌面样式表总是设置为高分辨率，即使它实际上是低分辨率的。
如您所见，我的桌面模式高度为 800 像素，媒体查询设置为 min-device-height:901px，但它正在下载高分辨率样式表。这是为什么？
【问题讨论】：
为什么投反对票？需要解释一下吗？ 您知道您需要媒体查询，但您可能没有考虑过如何编写媒体查询？ @cimmanon：这不是重复的！我已经更新了我的问题以及您指出的问题中的答案与该问题无关。我正在寻找 3 条规则来复制 javascript；我已经更新了这个问题。如图所示，我不知道为什么应该将样式表限制为桌面低分辨率的 min-device-height:901px 不起作用。问题是“如何编写 3 条规则来检测移动/桌面低分辨率/桌面高分辨率”，到目前为止，所有答案都有很多规则，但没有一个答案将问题减少到只有 3 条规则。所以不，这不是重复的恕我直言 除非您在物理上更改了设备的分辨率，否则您所做的只是更改视口的大小，并且 *device-width 属性不会响应视口的更改。如果你想要你所要求的，你会接受这个被标记为重复的问题中的建议，而不是跺脚并声明“这不是重复的，它没有给我确切的代码我需要复制/粘贴到我的项目中！” @cimmanon：无论如何，在 3 个媒体查询中检测移动/低分辨率桌面/高分辨率桌面就是这个问题的内容。现在我让它在 javascript 中工作，我正在寻找替换它。您可以还原副本以查看其他人的想法吗？ 【参考方案1】：将所有 CSS 文件包含到您的 <head>。或者，您可以将它们组合成一个 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" />
然后您通过将文件内容包装到媒体查询来更改文件。
@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
查看here 了解 CSS 媒体查询。作为替代方案，您可以使用nested media queries，但一些旧浏览器可能不支持它们。
【讨论】：
这不起作用，因为如果用户在移动设备上并旋转到横向，那么他就不再使用移动设备了。 我明白了。仅使用媒体查询您无法检测到设备类型。您仍然需要依靠 JavaScript 来进行区分（请参阅 this）。 this 也可能会有所帮助。 好的，你可以投票重新提出问题吗？？ 当然。你还在寻找纯 CSS 的解决方案吗？ 是的，我的目标是用纯 CSS 媒体查询实现替换 javascript。以上是关于为移动设备、低分辨率桌面和高分辨率桌面编写媒体查询 [重复]的主要内容，如果未能解决你的问题，请参考以下文章