我对媒体查询的世界很陌生,而且很明显,我忽略了宽度和设备宽度之间的差异 - 除了明显的定位能力之外.
我想将常规计算机和具有相同断点的设备作为目标,因此我只是将所有最小和最大宽度查询复制到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" …