Question

想知道是否有人可以帮助我，我正在尝试使用多个@media，但是我做的最后一个@media覆盖了其他@media。因此，最大宽度768px会覆盖最大宽度375。

/* Banner */
@media (max-width: 375px) {
.jumbotron {
  border-radius: 0px;
  height: 278px;
  padding-bottom: 0px;
}

.banner_title {
  font-size: 45px;
}

.banner_para {
  font-size: 15px;
}

.banner_btn {
  font-size: 15px;
}

}

    @media (max-width: 768px) {
.jumbotron {
  height: 378px;
  padding-bottom: 0px;
}

.banner_title {
  font-size: 80px;
}

.banner_para {
  font-size: 18px;
}

.banner_btn {
  font-size: 18px;
}
}

Answer 1

在CSS中，代码的执行顺序是从上到下。这称为级联，我将在下面放置一个链接以获取有关此信息的更多信息。

在您的情况下，最大值设置为375px和768px。如果您的视口为300px，则其最大值在您定义的375px和768px的范围内。因此，CSS将查看定义代码的顺序。

示例（视口300像素）：

@media (max-width: 375px) { 
   body { background-color: red; }
}

@media (max-width: 768px) { 
   body { background-color: blue; }
}

300px在375px和768px以下。因此它通过了375px和768px的最大值（如if语句一样）。最后定义的主体颜色为蓝色！

如果您仍然希望使用相同的代码，请确保将最低值放在最后：

示例（视口300像素）：

@media (max-width: 768px) { 
   body { background-color: red; }
}

@media (max-width: 375px) { 
   body { background-color: blue; }
}

我个人的建议是切换到最小宽度值，而不是最大宽度值。关于此的更多信息：http://www.the-haystack.com/2015/12/23/choosing-between-min-and-max-width/

有关级联的更多信息： https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance

Answer 2

只需在媒体查询中添加最小宽度，就可以使CSS代码保持相同的顺序。查看下面的CSS代码：

    /* Banner */
@media (min-width: 122px)and (max-width: 375px) {
.jumbotron {
  border-radius: 0px;
  height: 278px;
  padding-bottom: 0px;
}

.banner_title {
  font-size: 45px;
}

.banner_para {
  font-size: 15px;
}

.banner_btn {
  font-size: 15px;
}

}

@media (min-width: 376px)and(max-width: 768px) {
.jumbotron {
  height: 378px;
  padding-bottom: 0px;
}

.banner_title {
  font-size: 80px;
}

.banner_para {
  font-size: 18px;
}

.banner_btn {
  font-size: 18px;
}
}

现在，您无需更改CSS代码的顺序。根据您的要求更改最小宽度尺寸。

多个CSS @media（最大宽度:)不起作用

2 个答案: