我对媒体查询的世界非常新鲜，很明显有一些基本的东西我缺少宽度和设备宽度之间的差异 – 除了他们明显的目标能力。
我想要定期的计算机和设备具有相同的断点，所以我只是复制了我的所有min&最大宽度查询到最小设备和最大设备宽度查询。无论什么原因，当我添加 – 设备对手，我的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">
解决方法
设备宽度是指显示器的分辨率(例如1024 x 1024的1024)，而宽度是指浏览器本身的宽度(如果浏览器未最大化，则宽度不同于分辨率)。如果你的分辨率足够大，让你在一个断点，但浏览器的宽度足够小，让你在另一个，你会得到一个奇怪的组合两者。
除非你有合理的理由基于分辨率而不是视口的大小来限制样式表，否则只需使用min-width / max-width，避免min-device-width / max-device-width。
