CSS 中的媒体无法使用最大宽度

Question

我正在尝试在 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>

现在没有媒体查询适用于宽度 459px 并且背景为红色...（黑色最大 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>

然后黑色背景适用于 459px 但在 460px 上有两个媒体查询...... 如何解决最大宽度上只有黑色背景和最小宽度上只有黄色的问题？

Answer 1

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

body {
  background: yellow;
}

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

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

body {
  background: black;
}

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

两种方式肯定有 no 宽度，两个 seetings 会发生碰撞，并且没有 no 设置会应用的宽度。

CSS 中的媒体无法使用最大宽度

Media in CSS are not working with max width

css

media-queries

responsive-design