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

Question

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

我想针对具有相同断点的常规计算机和设备，所以我只是将所有最小和最大宽度查询复制到最小设备和最大设备宽度查询。无论出于何种原因，当我添加 -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">

Answer 1

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

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

Answer 2

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

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

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

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