SCSS中@media的min-width与max-width设置错误导致响应式按钮间隙异常

核心问题：媒体查询的层叠优先级冲突 #

你的SCSS代码中，媒体查询范围重叠且顺序不合理，导致规则被覆盖：

• @media screen and (max-width: 681px) 的范围包含了 660px-680px，且该查询写在 660px-680px 的查询之后
• CSS遵循「后定义规则覆盖先定义规则」的层叠原则，因此屏幕尺寸在660px-680px区间时，生效的是gap:5px，而非你期望的gap:20px

优化后的代码（贴合需求） #

你的需求是按钮水平排列时间隙20px，垂直排列时间隙5px，无需冗余断点设置，简化代码如下：

.dialog-buttons-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px; /* 默认水平排列时间隙 */

  /* 当屏幕宽度不足以容纳按钮水平排列时，切换为垂直排列并设置小间隙 */
  @media screen and (max-width: 680px) {
    flex-direction: column; /* 强制垂直排列，避免wrap的不确定性 */
    gap: 5px;
  }
}

若需保留原断点逻辑的修复 #

如果一定要基于你设定的660px-680px断点保持20px间隙，只需调整媒体查询顺序，将更具体的范围放在后面：

.dialog-buttons-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;

  @media screen and (max-width: 681px) {
    gap: 5px;
  }

  /* 更具体的范围放在后面，确保规则优先生效 */
  @media screen and (min-width: 660px) and (max-width: 680px) {
    gap: 20px;
  }

  @media screen and (min-width: 682px) {
    gap: 20px;
  }
}

内容的提问来源于stack exchange，提问作者Ch.