Media Queries样式异常：991px规则不生效，1300px规则跨范围生效求助

核心原因：CSS层叠规则与媒体查询匹配逻辑 #

当视口宽度≤991px时，max-width:991px和max-width:1300px两个媒体查询的条件同时成立（因为991小于1300）。而你把max-width:991px的媒体查询写在了max-width:1300px的前面，根据CSS的层叠规则：相同优先级的样式，后定义的会覆盖先定义的。所以1300px媒体查询里的.image-div样式会直接覆盖991px里的同名样式，导致你看不到991px的样式效果。

反过来，如果你把样式放在1300px的媒体查询里，只要视口≤1300px（自然包含≤991px的情况），这个媒体查询就会生效，所以样式会在两个尺寸下都显示。

解决办法 #

方法1：调整媒体查询顺序（推荐）

把针对更小视口的媒体查询（max-width:991px）放在更大视口的（max-width:1300px）后面，这样当视口≤991px时，后定义的991px规则会覆盖前面1300px的规则：

/* 先写大尺寸媒体查询 */
@media (max-width: 1300px) {
  /* 你的1300px相关样式 */
  .image-div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 50rem;
    height: 35rem;
    justify-content: space-between;
    margin-top: -145%;
    margin-right: 5rem;
    float: right;
  }
}

/* 再写小尺寸媒体查询 */
@media (max-width: 991px) {
  /* 你的991px相关样式 */
  .image-div {
    display: flex;
    flex-direction: row;
    margin-top: 0rem;
  }
}

方法2：提高991px样式优先级（备选，不推荐）

如果不想调整顺序，可以给991px里的.image-div样式强制提高优先级，比如添加!important（但注意，!important会破坏CSS正常的层叠逻辑，尽量少用）：

@media (max-width: 991px) {
  .image-div {
    display: flex !important;
    flex-direction: row !important;
    margin-top: 0rem !important;
  }
}

内容的提问来源于stack exchange，提问作者Anthony Onah