CSS中的媒体不适用于最大宽度[重复]答案

【问题标题】：Media in CSS are not working with max width [duplicate]CSS中的媒体不适用于最大宽度[重复]
【发布时间】：2021-03-30 13:45:14
【问题描述】：

我正在尝试在 scss 中进行媒体查询，但无法正常工作。我有这样的代码

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
body {
  background: red;
}

@media (min-width: 460px) {
  body {
    background: yellow;
  }
}
@media (max-width: 459px) {
  body {
    background: black;
  }
}
</style>

现在没有媒体查询适用于宽度 459 像素且背景为红色...（黑色在最大 458 上，黄色在 460 上）但是当我改为

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
body {
  background: red;
}

@media (min-width: 460px) {
  body {
    background: yellow;
  }
}
@media (max-width: 460px) {
  body {
    background: black;
  }
}
</style>

然后黑色背景适用于 459 像素，但在 460 像素上，两个媒体查询正在运行... 如何解决这个问题，在最大宽度上我只有黑色背景，在最小宽度上只有黄色？

【问题讨论】：

标签： css responsive-design media-queries

【解决方案1】：

我会做不同的事情：首先定义一个通用规则，然后为较小的屏幕定义一个媒体查询，如下所示：

body {
  background: yellow;
}

@media (max-width: 460px) {
  body {
    background: black;
  }
}

或者反过来，使用移动优先的方法：

body {
  background: black;
}

@media (min-width: 460px) {
  body {
    background: yellow;
  }
}

两种方式都肯定有 no 宽度可以让两个会议发生碰撞，而 no 设置则根本不适用。

【讨论】：