媒体查询仅使用最大的宽度

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">

但是在浏览器中显示这样的显示：
"注意：浏览器宽度：980"

在此处输入图像描述

谢谢

Answer 1

请按这样的媒体查询订单，例如大到小

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

Answer 2

如果要获得每个分辨率的所需结果，则使用最小宽度和最大宽度属性。这样它将在给定最小宽度和最大宽度的给定范围内应用特定样式。

  @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