响应式CSS多设备适配异常：样式重叠、规则错位问题咨询

你的问题核心在于媒体查询区间重叠和CSS层叠顺序错误，导致不同设备的样式互相覆盖。以下是具体的修复方案：

问题分析 #

1. 你设置的max-width:821px会覆盖所有宽度≤821px的设备（包括iPhone的≤391px），如果iPhone的媒体查询写在iPad规则之前，iPad样式会直接覆盖iPhone的样式。
2. 当屏幕宽度刚好等于821px时，min-width:821px（PC）和max-width:821px（iPad）会同时命中，此时后加载的规则会覆盖先加载的，导致PC出现iPad样式或反之。
3. 没有明确划分各设备的独立宽度区间，导致规则边界模糊。

修复方案 #

方案1：移动优先（推荐） #

先写最小设备（iPhone）的基础样式，再依次扩展到iPad、PC，确保层叠顺序正确：

/* iPhone 专属样式（宽度 ≤391px） */
.container {
  /* 你的iPhone样式代码 */
}

/* iPad 专属样式（宽度 392px ~ 821px） */
@media screen and (min-width: 392px) and (max-width: 821px) {
  .container {
    /* 你的iPad样式代码 */
  }
}

/* PC 专属样式（宽度 ≥822px） */
@media screen and (min-width: 822px) {
  .container {
    /* 你的PC样式代码 */
  }
}

方案2：桌面优先 #

如果习惯先写PC样式，需确保iPhone规则在iPad规则之后，避免被覆盖：

/* PC 专属样式（宽度 ≥822px） */
@media screen and (min-width: 822px) {
  .container {
    /* 你的PC样式代码 */
  }
}

/* iPad 专属样式（宽度 392px ~ 821px） */
@media screen and (min-width: 392px) and (max-width: 821px) {
  .container {
    /* 你的iPad样式代码 */
  }
}

/* iPhone 专属样式（宽度 ≤391px） */
@media screen and (max-width: 391px) {
  .container {
    /* 你的iPhone样式代码 */
  }
}

关键注意点 #

• 避免使用max-width:821px单独作为iPad的规则，必须配合min-width:392px限定区间，防止覆盖iPhone样式。
• PC规则使用min-width:822px而非821px，避免和iPad的max-width:821px在边界值上重叠。
• 始终保证CSS规则的顺序：移动优先从小到大，桌面优先从大到小，后写的规则不会错误覆盖前序设备的样式。

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