Html 媒体查询css响应

我有这个p：

<p class="p">This is for tests</p>

.p {
  font-size: 50px;
  background-color: blue;
}

375px是什么时候

    @media only screen and (max-width: 375px) {
  .p {
    background-color: green;
    font-size: 20px;
  }
}

为什么375px查询将背景色设置为320px，当屏幕为320px时，我希望保持红色，当屏幕为375 px时，我希望保持绿色。

---

（在媒体响应中新增！）

只需重新排列媒体查询即可。否则，最大宽度：375px超过最大宽度：320px

.p{
字体大小：50px；
背景颜色：蓝色；
}
@仅介质屏幕和（最大宽度：375px）{
p{
背景颜色：绿色；
字体大小：20px；
}
}
@仅介质屏幕和（最大宽度：320px）{
p{
背景色：红色；
字体大小：30px；
}
}

---

这是用于测试的

没有问题，只需更改顺序即可

.p {
  font-size: 50px;
  background-color: blue;
}

@media only screen and (max-width: 375px) {
  .p {
    background-color: green;
    font-size: 20px;
  }
}

@media only screen and (max-width: 320px) {
  .p {
    background-color: red;
    font-size: 30px;
  }
}

.p{
字体大小：50px；
背景颜色：蓝色；
}
@仅介质屏幕和（最大宽度：375px）{
p{
背景颜色：绿色；
字体大小：20px；
}
}
@仅介质屏幕和（最大宽度：320px）{
p{
背景色：红色；
字体大小：30px；
}
}

---

这是用于测试的

我们需要对媒体查询进行重新排序，因为如果您为一个屏幕大小编写两条规则“max width:320px”和“max width:375px”，这两条规则都满足，那么它将选择声明的最后一条css规则。你可以用！第一条规则很重要，它可以解决您的问题，而无需重新排序，但这不是正确的方法

根据您的示例，如果浏览器窗口为320px像素宽，则背景颜色将为绿色，因为320px条件满足两个媒体查询，因此它将选择最后一个规则

//第一条规则
@仅介质屏幕和（最大宽度：320px）{
p{
背景色：红色；
字体大小：30px；
}
}
//最后一条规则
@仅介质屏幕和（最大宽度：375px）{
p{
背景颜色：绿色；
字体大小：20px；
}
}

只需更改订单即可

.p {
  font-size: 50px;
  background-color: blue;
}

@media only screen and (max-width: 375px) {
  .p {
    background-color: green;
    font-size: 20px;
  }
}

@media only screen and (max-width: 320px) {
  .p {
    background-color: red;
    font-size: 30px;
  }
}

---

将

max width:375px

查询放在CSS文件中

max width:320px

的上方解释为什么…@epascarello:因为CSS是按从上到下的顺序工作的。因此，无论最后得到什么值，它都只会将其反映到标记中。在这种情况下，屏幕尺寸375的媒体查询覆盖了从320获得的值。因此，需要重新订购。第二种方法是提供一系列的媒体查询

@media only screen和（最小宽度：321px）以及（最大宽度：375px）

，这不是层叠的意思吗？：）