html – 媒体查询取消其他媒体查询

前端之家收集整理的这篇文章主要介绍了html – 媒体查询取消其他媒体查询前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我很困惑,因为如果宽度小于748px,应该隐藏徽标.但是,宽度低于960px的所有尺寸都会显示徽标.

我在这里想念的是什么?

解决方法

(在屏幕截图中)我看到max-width:768px媒体查询在max-width:960px之前声明,这是不正确的.仅使用max-width的媒体查询应按降序排序.我们假设您按此顺序声明媒体查询

>(最大宽度:768px)
>(最大宽度:960px)

如果您的屏幕宽度为400px,则两个媒体查询都将符合条件.在这种情况下,稍后声明的媒体查询块获胜.

解:

按最大宽度规则降序排序(首先是较大的宽度).

或者使用互斥的媒体查询块,例如:

>(最小宽度:961px)
>(最小宽度:769px)和(最大宽度:960px)
>(最大宽度:768px)

在这种情况下,顺序无关紧要.

猜你在找的HTML相关文章