Question

我有这个p：

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

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

当我的屏幕宽度为320px时，请更改为：

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

以及何时为375px：

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

为什么375px查询将background-color设置为320px，当屏幕为320px时我想保持红色，而当375px时我想保持绿色。（媒体响应新功能！）

Answer 1

只需重新排序您的媒体查询。否则，最大宽度：375px会超过乘骑最大宽度：320px

.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 class="p">This is for tests</p>

Answer 2

没有错，只需更改订单即可。

.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 class="p">This is for tests</p>

Answer 3

我们需要对媒体查询进行重新排序，因为如果您针对满足两个规则的一个屏幕尺寸编写了两个规则“最大宽度：320像素”和“最大宽度：375像素”，它将选择最后一个css规则被宣布。您可以对第一条规则使用！important，它可以解决您的问题而无需重新排序，但这不是正确的方法。

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

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

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

当您重新排序时，当屏幕尺寸为320px时，背景颜色将变为绿色，因为我们最后添加了320px媒体查询。

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

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

我希望这可以解决您的查询。

Answer 4

只需更改订单。

.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;
  }
}

媒体查询CSS响应

4 个答案: