我对媒体查询世界还很陌生，很明显，宽度和设备宽度之间的差异让我遗漏了一些基本知识，除了它们明显的定位能力之外。

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