媒体查询CSS响应[重复]答案

【问题标题】：media query css responsive [duplicate]媒体查询CSS响应[重复]
【发布时间】：2020-10-15 16:24:57
【问题描述】：

我有这个：

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

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

当 i 屏幕为 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 查询将背景颜色设置为 320px，当屏幕为 320px 时我想保持红色，而当屏幕为 375px 时我想保持绿色。（媒体响应的新功能！）

【问题讨论】：

将 max-width: 375px 查询放在 CSS 文件中的 max-width: 320px 上方

标签： html css responsive

【解决方案1】：

只需重新排序您的媒体查询。否则， max-width:375px 会覆盖 max-width: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;
  }
}

&lt;p class="p"&gt;This is for tests&lt;/p&gt;

【讨论】：

解释为什么......
@epascarello：因为 CSS 按从上到下的顺序工作。因此，无论它获得的最后一个值是什么，它都只会将其反映到标签中。在这种情况下，屏幕尺寸 375 的媒体查询将覆盖从 320 获得的值。因此，需要重新排序。第二种方法是提供一系列媒体查询@media only screen and (min-width: 321px) and (max-width: 375px) 也可以。
这不就是层叠的意思吗？ :)

【解决方案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;
  }
}

&lt;p class="p"&gt;This is for tests&lt;/p&gt;

【讨论】：

【解决方案3】：

我们需要重新排序媒体查询，因为如果你为一个屏幕尺寸写两条规则“max-width: 320px”和“max-width:375px”同时满足这两条规则，它将选择最后一个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;
  }
}

我希望这能解决您的问题。

【讨论】：

【解决方案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;
  }
}

【讨论】：