我对媒体查询的世界并不陌生，很明显我忽略了宽度和设备宽度之间的差异 - 除了明显的定位能力之外。
我想定位具有相同断点的常规计算机和设备，所以我只是复制了我的所有min＆amp;最大宽度查询到最小设备和最大设备宽度查询。无论出于何种原因，当我添加-device对应物时，我的CSS被常规计算机解释得非常不同，而且我不确定我做错了什么。
You can see the effects here（这就是它应该是什么样子）
And here（在我的查询中添加-device-width之后，我的CSS会以最小的宽度搞定 - 即使浏览器宽度小于所调用的内容，也可以看到更大的分辨率。） / p>
这是我的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">
答案 0 :(得分：76)
设备宽度是指显示器的分辨率（例如1024×1024×768），而宽度是指浏览器本身的宽度（如果浏览器没有最大化，则与分辨率不同）。如果你的分辨率足够大，可以让你进入一个断点，但浏览器的宽度足够小，可以让你进入另一个断点，那么你最终会得到两者的奇怪组合。
除非您有合理的理由根据分辨率而不是视口大小限制样式表，否则只需使用min-width / max-width并避免min-device-width / {{ 1}}。
答案 1 :(得分：1)