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

Question

我对媒体查询的世界很陌生,而且很明显,我忽略了宽度和设备宽度之间的差异 - 除了明显的定位能力之外.

我想将常规计算机和具有相同断点的设备作为目标,因此我只是将所有最小和最大宽度查询复制到min-device和max-device width查询.无论出于何种原因,当我添加-device对应物时,我的CSS被常规计算机解释得非常不同,而且我不确定我做错了什么.

你可以在这里看到效果(这应该是它应该是什么样的)

在这里(在我的查询中添加-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×1024×768),而宽度是指浏览器本身的宽度(如果浏览器没有最大化,则与分辨率不同).如果你的分辨率足够大,可以让你进入一个断点,但浏览器的宽度足够小,可以让你进入另一个断点,你最终会得到两者的奇怪组合.

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

Answer 2

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

因此，应该使用width和height特征来分别考虑视口的宽度和高度。

PS 这些是范围特征，它们可以加上前缀min-或max-表达“最小条件”或“最大条件”约束。参考这里。