如何消除CSS宽高比媒体查询重叠，实现视频元素切换？

你的问题出在两个媒体查询的条件存在重叠区间——当视口宽高比恰好等于4/3时，min-aspect-ratio: 4/3和max-aspect-ratio: 4/3会同时匹配。虽然实际测试中可能因为CSS声明顺序（后写的规则覆盖前写的）没出现双视频，但这种依赖顺序的写法不够可靠，确实存在潜在风险。

方案一：修正媒体查询条件，消除重叠 #

使用CSS支持的比较运算符（>、<=）划分互斥的宽高比区间，彻底避免重叠：

/* 宽高比大于4/3时，显示桌面端16:9视频 */
@media (aspect-ratio > 4/3) {
  video.mobile {
    display: none;
  }
  video.desktop {
    display: block;
  }
}

/* 宽高比小于等于4/3时，显示移动端1:1视频 */
@media (aspect-ratio <= 4/3) {
  video.mobile {
    display: block;
  }
  video.desktop {
    display: none;
  }
}

方案二：设置默认状态，简化媒体查询 #

先定义默认显示移动端视频，再用单个媒体查询覆盖宽高比更大的场景，写法更简洁且无重叠风险：

/* 默认状态：显示移动端1:1视频 */
video.mobile {
  display: block;
}
video.desktop {
  display: none;
}

/* 宽高比大于4/3时，切换为桌面端16:9视频 */
@media (aspect-ratio > 4/3) {
  video.mobile {
    display: none;
  }
  video.desktop {
    display: block;
  }
}

两种方案都能确保任何宽高比下只会显示一个视频，完全解决你担心的重叠问题。

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