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很简单，实现的效果是一个