在宽度刚好等于 991 像素时,会出现媒体查询 min-width: 991px 和 max-width: 991px 部分样式同时生效的问题,导致样式混乱。理想情况下,应该有三种样式类型:
媒体查询样式:根据屏幕宽度变化而修改样式,分为以下三类:
问题在于如何定义一个媒体断点,只让当前媒体查询样式和公共样式生效。以下解决方案可以解决此问题:
解决方案:
在媒体查询中,添加一个精确的值作为 последней 规则。
例如:
@media (width: 991px){ /* 仅作用于 991px 宽的屏幕 */ }