媒体查询仅使用最大宽度

Question

我对媒体查询有疑问，它总是替换最大的查询 idk 为什么！这是我的代码

@media screen and (max-width: 575px) {
     .sectionHeader{
        color: #36260d;
        font-family: BebasNeue, Helvetica, Arial, sans-serif;
        font-size: 25px;
        letter-spacing: 20px;
        line-height: 55px;
        vertical-align: middle;
    }
}

@media screen and (max-width: 768px) {
    .sectionHeader{
        color: #36260d;
        font-family: BebasNeue, Helvetica, Arial, sans-serif;
        font-size: 35px;
        letter-spacing: 20px;
        line-height: 55px;
        vertical-align: middle;
    }
}
@media screen and (max-width: 992px) {

    .sectionHeader{
        color: #36260d;
        font-family: BebasNeue, Helvetica, Arial, sans-serif;
        font-size: 55px;
        letter-spacing: 20px;
        line-height: 55px;
        vertical-align: middle;
    }

}

@media screen and (max-width: 1200px) {
    .sectionHeader{
        color: #36260d;
        font-family: BebasNeue, Helvetica, Arial, sans-serif;
        font-size: 65px;
        letter-spacing: 20px;
        line-height: 55px;
        vertical-align: middle;
    }
}

我的 html

也有视口元

<meta name="viewport" content="width=device-width, initial-scale=1">

但在浏览器中它显示如下：
"Note: browser width : 980"

enter image description here

谢谢

Answer 1

如果您想为每种分辨率获得所需的结果，那么您可以使用最小宽度和最大宽度属性。这样它将在给定的最小和最大宽度范围内应用特定样式。

  @media screen and (max-width: 575px) {
 .sectionHeader{
    color: #36260d;
    font-family: BebasNeue, Helvetica, Arial, sans-serif;
    font-size: 25px;
    letter-spacing: 20px;
    line-height: 55px;
    vertical-align: middle;
  }
}

@media screen and (min-width:576px) and (max-width: 768px) {
.sectionHeader{
    color: #36260d;
    font-family: BebasNeue, Helvetica, Arial, sans-serif;
    font-size: 35px;
    letter-spacing: 20px;
    line-height: 55px;
    vertical-align: middle;
  }
 }
@media screen and (min-width:769px)  and (max-width: 992px) {

.sectionHeader{
    color: #36260d;
    font-family: BebasNeue, Helvetica, Arial, sans-serif;
    font-size: 55px;
    letter-spacing: 20px;
    line-height: 55px;
    vertical-align: middle;
}

}

@media screen and (min-width:993px)  and (max-width: 1200px) {
.sectionHeader{
    color: #36260d;
    font-family: BebasNeue, Helvetica, Arial, sans-serif;
    font-size: 65px;
    letter-spacing: 20px;
    line-height: 55px;
    vertical-align: middle;
}
}

DEMO

Answer 2

请按照从大到小的顺序排列媒体查询

@media screen and (max-width: 1200px) {
    .sectionHeader{
        color: #36260d;
        font-family: BebasNeue, Helvetica, Arial, sans-serif;
        font-size: 65px;
        letter-spacing: 20px;
        line-height: 55px;
        vertical-align: middle;
    }
}
@media screen and (max-width: 992px) {

    .sectionHeader{
        color: #36260d;
        font-family: BebasNeue, Helvetica, Arial, sans-serif;
        font-size: 55px;
        letter-spacing: 20px;
        line-height: 55px;
        vertical-align: middle;
    }

}
@media screen and (max-width: 768px) {
    .sectionHeader{
        color: #36260d;
        font-family: BebasNeue, Helvetica, Arial, sans-serif;
        font-size: 35px;
        letter-spacing: 20px;
        line-height: 55px;
        vertical-align: middle;
    }
}
@media screen and (max-width: 575px) {
     .sectionHeader{
        color: #36260d;
        font-family: BebasNeue, Helvetica, Arial, sans-serif;
        font-size: 25px;
        letter-spacing: 20px;
        line-height: 55px;
        vertical-align: middle;
    }
}

媒体查询仅使用最大宽度

Media Queries use only biggest width

css

mobile-website

media-queries