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

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。

相关文章

相关视频

---

• html下拉菜单文字怎么变小
• HTML里怎么设置thead表头的颜色
• html5中元素能拉伸宽度吗
• html中怎么清除li黑点
• media query中的条件重叠_html/cs...

• 首页数据搜索
• 首页数据分页
• 获取文章连表查询的数据
• 获取文章归档数据

网友评论

文明上网理性发言，请遵守 新闻评论服务协议

我要评论

立即提交

专题推荐

• 独孤九贱-php全栈开发教程

  全栈 170W+

  主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

• 玉女心经-web前端开发教程

  入门 80W+

  主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门

• 天龙八部-实战开发教程

  实战 120W+

  主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习