@media screen and (max-width:600px){/* 样式一 */}
@media screen and (min-width:600px) and (max-width:960px){/* 样式二 */}
@media screen and (min-width:960px){/* 样式三 */}
根据这些教程的解释，这种设置的效果是：当视口宽度小于等于600px时，应用样式一；当视口宽度大于等于600px且小于等于960px时，应用样式二；当视口宽度大于等于960px时，应用样式三。粗看上去没有问题，根据不同视口宽度设置了三种样式效果，但是细看的话问题就来了。上面在描述视口宽度时，都使用了“等于”这个逻辑关系。如果只针对一条规则就没什么好说的了，但600px和960px这两个值都同时满足了两条规则，即满足第一条规则的小于等于600px，又满足第二条规则的大于等于600px，这样便产生了条件重叠的问题。那么当窗口的宽度正好处于600px或960px这种处于分界位置的值的时候，会是怎样呢？
我们可以进行一个简单的试验，demo很简单，实现的效果是一个在上述三种像素范围内的颜色切换，重点观察浏览器视口宽度在600px和960px像素时的颜色到底受哪个media query设置的影响。浏览器宽度采用手动拉伸窗体的方式进行调整，绑定window对象的onresize事件以在console窗口中输出当前的窗口宽度值。
通过上述试验发现，当浏览器宽度值为600px时，其效果还是停留在样式一的效果上。当宽度调整为601px时，其会变成样式二的效果。也就是说，当一个值作为一个条件的上限的同时又作为另一个条件的下限时，其对于下限条件而言并不包含等于的关系。同理，对于样式三的min-width:960px而言，其含义也是在大于960px的情况下，并不包含等于960px的情况。
还有一种情况，比如我们想在不同的视口宽度下改变网页元素的布局，比如将横向排列改为纵向排列。当这种页面处于600px或960px这种分界值时，页面元素的排列不会符合css中设置的任何一种规则，具体是什么样子可以自己手动尝试一下。
下载本文