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”

enter image description here

感谢

Answer 1

如果要为每个分辨率获得所需的结果，则可以使用min-width和max-width属性。因此它将在给定的最小和最大宽度范围内应用特定样式。

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

媒体查询仅使用最大宽度

2 个答案: