CSS 媒体查询 min-width 和 min-device-width 冲突？

Posted 2023-03-06

【中文标题】CSS 媒体查询 min-width 和 min-device-width 冲突？

【英文标题】：CSS media queries min-width and min-device-width conflicting?

【发布时间】：2013-02-22 22:45:20

【问题描述】：

我对媒体查询领域非常陌生，很明显，除了它们明显的定位能力之外，我还缺少关于宽度和设备宽度之间差异的一些基本信息。

我想针对具有相同断点的常规计算机和设备，所以我只是将所有最小和最大宽度查询复制到最小设备和最大设备宽度查询。无论出于何种原因，当我添加 -device 对应项时，普通计算机对我的 CSS 的解释非常不同，我不确定我做错了什么。

You can see the effects here（应该是这个样子）

And here（在我的查询中添加 -device-width 后，我的 CSS 在最小宽度处搞砸了——即使浏览器宽度小于所调用的宽度，也会看到更大的分辨率）。

这是我的 CSS 链接——我的语法有问题吗？ ：

<link rel="stylesheet" media="only screen and (max-width: 674px), only screen and (max-device-width: 674px)" href="300.css">
<link rel="stylesheet" media="only screen and (min-width: 675px) and (max-width: 914px), only screen and (min-device-width: 675px) and (max-device-width: 914px)" href="650.css">
<link rel="stylesheet" media="only screen and (min-width: 915px) and (max-width: 1019px), only screen and (min-device-width: 915px) and (max-device-width: 1019px)" href="915.css">


<link rel="stylesheet" media="only screen and (min-width: 1020px), only screen and (min-device-width: 1020px)" href="1020.css">
<link rel="stylesheet" media="only screen and (min-width: 1200px) and (max-width: 1299px), only screen and (min-device-width: 1200px) and (max-device-width: 1299px)" href="1200.css">
<link rel="stylesheet" media="only screen and (min-width: 1300px), only screen and (min-device-width: 1300px)" href="1300.css">

【问题讨论】：

在 FF 中，两个版本在我看来完全一样。您在哪个浏览器和版本中遇到问题？

FF 12. 确保从最宽处缓慢拖动到最小处，以便它可以看到其他查询。我在我尝试过的每个浏览器中都看到了这个问题——FF、Chrome 等——我不确定你是否在较小的宽度上尝试它。

这里是 FF 12 和 Chrome 25 swanflighthaven.com/pagestuff/correct.jpg 和 swanflighthaven.com/pagestuff/incorrect.jpg 的屏幕截图

【参考方案1】：

设备宽度是指显示器的分辨率（例如，1024 和 1024x768），而宽度是指浏览器本身的宽度（如果浏览器未最大化，它将与分辨率不同）。如果您的分辨率大到足以让您进入一个断点，但浏览器的宽度小到足以让您进入另一个断点，那么您最终会得到两者的奇怪组合。

除非您有正当理由根据分辨率而不是视口大小来限制样式表，否则只需使用min-width/max-width 并避免使用min-device-width/max-device-width。

【讨论】：

啊。嗯，这很有意义。非常感谢您简洁地解释这一点！我觉得自己很愚蠢，从我所做的阅读中我无法理解这一点。但问题是：我如何定位移动设备和计算机？

如果我跳过设备宽度，是否所有设备都是目标（Iphone、Ipad 等）？

因为移动设备的浏览器通常最大化，设备宽度和宽度将是相同的。

设备宽度只下载一张图片，窗口宽度调整窗口可以跨越一个断点然后下载多张图片！

小心，device-width 现已弃用。请参阅下面的answer。

【参考方案2】：

device-width 在媒体查询级别 4 中已弃用。 有关详细信息，请参阅 MDN 文档here。

已弃用：不再推荐使用此功能。尽管某些浏览器可能仍然支持它，但它可能已经从相关的 Web 标准中删除，可能正在被删除，或者可能仅出于兼容性目的而保留。避免使用它，并尽可能更新现有代码；请注意，此功能可能随时停止工作。

所以，width 和 height 特性应该分别用于考虑视口的宽度和高度。

附：这些是范围特征，它们可以以min- 或max- 为前缀来表达“最小条件”或“最大条件”约束。参考here。

【讨论】：

我意识到这是一个旧答案，但是您将如何处理大型移动景观（760 像素以上）的样式？在不使用设备宽度的情况下，当我将大型手机定位为横向样式时，移动横向样式仍会应用于桌面。