Javascript 媒体查询的顺序如何影响已取消的属性？

我有一个媒体查询如下：

@media screen and (max-width: 500px) {
  .medd_article{
    width: 100%;
  }
}

@media screen and (max-width: 300px) {
  .medd_article {
    width: 300px;
  }
}

奇怪的是，若我订购了300px的介质查询，那个么它就不再工作了。这是预期的行为。我在网上找不到任何东西，上面说应该这样做

我正在对.jsx和.css文件使用React。我不确定这是否重要

---

当我查看调试器时，我可以看到300px最小宽度被划掉，而不是100%宽度。

您的问题的结构有点混乱。CSS的工作原理是最后一个应用。所以是的，如果你高于300px，那么500px将适用。通常，你的css结构从低到高。你的方法有点不合适，试着使用移动优先方法和最小宽度。这是否回答了你的问题？谢谢我没有明确说明的是，浏览器（在本例中为Chrome）将我的两个媒体查询视为两个单独的媒体查询。答案是9岁以上，而我的浏览器根本不是这样。在我上面发布的例子中，它在300px和500px之间保持100%的宽度。当视图端口降至300像素以下时，它将保持300像素的宽度。正是我想要的。我只是觉得奇怪，为了让它工作，我不得不改变顺序。我稍后会尝试提供一把小提琴。这个主题很古老，但规则仍然是一样的。你为什么不在500像素的媒体查询上添加一个

minwidth:300px

，它应该可以完美地完成这项工作