为什么媒体查询中更高的最大宽度会覆盖较低的最大宽度？

Question

我的页面宽度低于991px,仍然'max-width 1200px'覆盖了我在css中的'max-width 991px'规则.

这是我的devtools窗口的屏幕截图:

这可以通过在'margin-top ...'css规则后面添加'!important'来解决.但我仍然想知道为什么会这样.

Answer 1

你必须改变媒体查询的顺序......

在你的情况下,最大宽度,你应该在你的css下面

因为max-width: 1200px它也是真的,后来才会被覆盖(看看行数!:))