不同宽度桌面端购物车模态框CSS响应式适配失效问题

• 媒体查询范围重叠：你现有的两条规则命中范围高度重合，@media (min-width: 801px) 会命中所有宽度≥801px的设备，包含了你第二条规则的801px~1920px区间。如果第二条规则写在第一条前面，CSS层叠规则会让后面的第一条规则覆盖第二条的配置，导致第二条不生效。
• 区间定义不符合需求：你第二条规则加了max-width: 1920px限制，宽度超过1920px的大屏设备不会触发这条规则，无法适配所有大屏场景。

调整媒体查询的区间范围和书写顺序，遵循「窄屏规则在前，宽屏规则在后」的书写原则，避免样式覆盖：

/* 适配普通笔记本：宽度≥801px 且 <1920px的设备 */
@media (min-width: 801px) and (max-width: 1919.98px) {
  #cart-modal {
    left: 59%;
  }
}

/* 适配大屏设备：宽度≥1920px的设备 */
@media (min-width: 1920px) {
  #cart-modal {
    left: 69%;
    width: 600px;
  }
}

补充说明 #

• 使用max-width: 1919.98px是为了避免部分设备的小数像素宽度导致的区间边界命中冲突
• 宽屏规则写在窄屏规则之后，相同选择器权重下后面的规则会自动覆盖前面的同名属性，不会出现样式被覆盖的问题
• 如果修改后仍不生效，可临时在属性后加!important测试是否是其他位置的同选择器规则权重更高导致的冲突，确认问题后优先通过调整选择器优先级解决，避免滥用!important

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