media query中的条件重叠_html/css_WEB-ITnose

　　想必接触过响应式布局的朋友对于media query都不会陌生，响应式布局也正是通过这个关键的属性来实现的。一些响应式布局的教程中通常都会进行如下类似设置来实现不同视口宽度条件下的布局示例：

@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中设置的任何一种规则，具体是什么样子可以自己手动尝试一下。